I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below.
The code snippet available here demonstrates the functionality I am aiming for. However, I have noticed that the animation only works the first time a section is displayed. Subsequent displays of other sections do not trigger the animation. Once the sections are shown once, the animation works perfectly fine.
@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;
}