CSS3动画执行两次原因

在CSS3动画中，我们有时候会发现动画执行了两次，这是因为CSS3动画默认会执行一遍正向动画和一遍反向动画，下面我们来看看具体原因。

.example {
    animation: myanimation 2s;
    animation-direction: alternate;
}
@keyframes myanimation {
from {
    transform: translateX(0);
}
to {
    transform: translateX(100px);
}
}

如上所示，我们定义了一个名为"myanimation"的动画，它将元素从左至右移动100个像素。在被应用到".example"类的元素中，我们设置了动画执行时间为2秒，并将动画方向设置为"alternate"，这表示动画在正向执行完后会反向执行。

由于我们设置了动画方向为"alternate"，因此，当动画正向执行时，元素从左至右移动100个像素，而在反向执行时，元素则从右至左移动100个像素，回到原来的位置。这个反向执行的过程会被认为是动画的第二次执行，从而导致整个动画一共执行了两次。

如果我们不想让动画执行两次，我们可以通过设置"animation-iteration-count"为"1"来使动画只执行一次：

.example {
    animation: myanimation 2s;
    animation-direction: alternate;
    animation-iteration-count: 1;
}

或者，我们也可以通过设置"animation-direction"为"normal"或"reverse"，来让动画只执行正向或反向动画：

.example {
    animation: myanimation 2s;
    animation-direction: normal;
 /*只执行正向动画*/}
.example2 {
    animation: myanimation 2s;
    animation-direction: reverse;
 /*只执行反向动画*/}
    

总之，要避免动画执行两次，我们可以通过设置"animation-iteration-count"或"animation-direction"来达到目标。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！