CSS 애니메이션이 먼저 실패한 다음 의도 한대로 작동합니다.

Question

간단한 페이지에서 작업하고 있습니다. 학과 목록이있을 것이며, 선택되면 정보가 아래에 표시 될 것입니다.

펜이 here인데 내가 찾고있는 기능이 있지만 애니메이션이 처음로드 될 때 작동하지만 다른 모든 섹션은 처음으로 애니메이션이 표시 될 때 작동합니다. 그 후에 그들은 애니메이션과 함께 아무 문제없이 표시됩니다.

@keyframes fadeIn { 

    0% { 
     transform: scale(0.9); 
     opacity: 0; 
    } 

    100% { 
     transform: scale(1); 
     opacity: 1; 
    } 
} 

#content1, #content2, #content3, #content4, #content5 { 
    -webkit-animation: fadeIn 0.7s ease-in-out; 
    -moz-animation: fadeIn 0.7s ease-in-out; 
    -o-animation: fadeIn 0.7s ease-in-out; 
    animation: fadeIn 0.7s ease-in-out; 
} 

input[type="radio"] { 
    display: none; 
} 

#tab1[type="radio"]:not(:checked) ~ #content1, 
#tab2[type="radio"]:not(:checked) ~ #content2, 
#tab3[type="radio"]:not(:checked) ~ #content3, 
#tab4[type="radio"]:not(:checked) ~ #content4, 
#tab5[type="radio"]:not(:checked) ~ #content5 { 
    display: none; 
} 

#tab1[type="radio"]:checked ~ #content1, 
#tab2[type="radio"]:checked ~ #content2, 
#tab3[type="radio"]:checked ~ #content3, 
#tab4[type="radio"]:checked ~ #content4, 
#tab5[type="radio"]:checked ~ #content5 { 
    display: block; 
} 

Answer 1

이것은 요소가 보이지 않는 동안 이미 초기 애니메이션이 트리거 되었기 때문입니다.
display을 block으로 설정하면 animation이 재설정되지 않습니다. 그러나 none으로 설정하면됩니다.

따라서 쉽게 animation 요소를 display: block;에 설정 한 속성을 설정하는 것이 좋습니다.

#tab1[type="radio"]:checked~#content1, 
 
#tab2[type="radio"]:checked~#content2, 
 
#tab3[type="radio"]:checked~#content3, 
 
#tab4[type="radio"]:checked~#content4, 
 
#tab5[type="radio"]:checked~#content5 { 
 
    display: block; 
 
    /* set the animation prop here */ 
 
    animation: fadeIn 0.7s ease-in-out; 
 
} 
 

 
@keyframes fadeIn { 
 
    0% { 
 
    transform: scale(0.9); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
#tab1[type="radio"]:not(:checked)+label, 
 
#tab2[type="radio"]:not(:checked)+label, 
 
#tab3[type="radio"]:not(:checked)+label, 
 
#tab4[type="radio"]:not(:checked)+label, 
 
#tab5[type="radio"]:not(:checked)+label { 
 
    color: #888; 
 
} 
 

 
#tab1[type="radio"]:checked+label, 
 
#tab2[type="radio"]:checked+label, 
 
#tab3[type="radio"]:checked+label, 
 
#tab4[type="radio"]:checked+label, 
 
#tab5[type="radio"]:checked+label { 
 
    color: #000; 
 
} 
 

 
#tab1[type="radio"]:not(:checked)~#content1, 
 
#tab2[type="radio"]:not(:checked)~#content2, 
 
#tab3[type="radio"]:not(:checked)~#content3, 
 
#tab4[type="radio"]:not(:checked)~#content4, 
 
#tab5[type="radio"]:not(:checked)~#content5 { 
 
    display: none; 
 
}

<input id="tab1" type="radio" name="tabs" checked> 
 
<label for="tab1" class="pure-button"><span>section 1</span></label> 
 
<input id="tab2" type="radio" name="tabs"> 
 
<label for="tab2" class="pure-button"><span>section 2</span></label> 
 
<input id="tab3" type="radio" name="tabs"> 
 
<label for="tab3" class="pure-button"><span>section 3</span></label> 
 
<input id="tab4" type="radio" name="tabs"> 
 
<label for="tab4" class="pure-button"><span>section 4</span></label> 
 
<input id="tab5" type="radio" name="tabs"> 
 
<label for="tab5" class="pure-button"><span>section 5</span></label> 
 
<div id="content1"> 
 
    <h1>content 1</h1> 
 
</div> 
 
<div id="content2"> 
 
    <h1>content 2</h1> 
 
</div> 
 
<div id="content3"> 
 
    <h1>content 3</h1> 
 
</div> 
 
<div id="content4"> 
 
    <h1>content 4</h1> 
 
</div> 
 
<div id="content5"> 
 
    <h1>content 5</h1> 
 
</div>