CSS动画首先失败然后按预期工作答案

【问题标题】：CSS animation fails first then works as intendedCSS动画首先失败然后按预期工作
【发布时间】：2017-12-29 14:58:30
【问题描述】：

我正在处理一个简单的页面。它将有一个学科列表，当它们被选中时，信息将显示在下面。

钢笔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;
}

【问题讨论】：

标签： html css css-animations keyframe

【解决方案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>

【讨论】：