/* 定义动画 */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* 应用动画 */
.element {
animation-name: slide-in;
animation-duration: 2s;
}
在上面的例子中，@keyframes slide-in 定义了一个名为 slide-in 的动画，该动画将元素从左侧移动到正常位置。然后，通过 animation-name: slide-in; 将这个动画应用到类为 .element 的 HTML 元素上。
动画名称是区分大小写的，因此确保在 animation-name 中使用与 @keyframes 中定义的名称相匹配的确切名称。如果你有多个动画效果，可以在 animation-name 中指定多个动画名称，它们将按照顺序依次播放。
.element {
animation-name: slide-in, fade-in;
animation-duration: 2s, 3s;
}
上述代码将应用两个动画，分别是 slide-in 和 fade-in，它们将以指定的顺序播放，并分别使用指定的持续时间。
转载请注明出处：http://www.zyzy.cn/article/detail/5985/CSS