2024年04月19日 建站教程
animation是CSS3实现的动画效果。可以通过设置关键帧keyframes来定义动画过程中的参数变化，从而实现各种复杂的动画效果。
keyframes动画示例
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide {
animation: slide-in 1s ease-out;
}
1. animation-name（动画名称）：指定要应用的@keyframes规则的名称。 2. animation-duration（持续时间）：指定动画持续的时间，以秒或毫秒为单位。 3. animation-timing-function（计时函数）：指定动画变化速度的计时函数。常见的值包括ease、linear、ease-in、ease-out、ease-in-out等。 4. animation-delay（延迟时间）：指定动画开始前的延迟时间，以秒或毫秒为单位。 5. animation-iteration-count（重复次数）：指定动画重复播放的次数，可以使用数字或关键字infinite表示无限重复。 6. animation-direction（播放方向）：指定动画的播放方向，包括normal（正向播放）、reverse（反向播放）和alternate（交替播放）。 7. animation-play-state（播放状态）：指定动画的播放状态，包括running（运行）和paused（暂停）。 8. animation-fill-mode（填充模式）：指定动画结束后元素应该如何填充，包括none、forwards、backwards和both等。
本文链接：http://so.lmcjl.com/news/2562/