语法:
animation-name: none | <keyframes-name> | <custom-ident> | <custom-ident>+;
- none:没有动画效果。默认值。
- <keyframes-name>:指定一个由 @keyframes 定义的关键帧动画的名称。
- <custom-ident>:自定义标识符,可以用于实现一些特殊的动画效果。
示例:
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation-name: slide-in;
animation-duration: 2s;
}
在这个例子中,@keyframes slide-in 定义了一个简单的从左侧滑入的动画。然后,.element 类应用了这个动画,通过 animation-name: slide-in; 指定了使用名为 slide-in 的关键帧动画。
您还可以使用逗号分隔多个动画名称,这样多个动画将依次应用于元素。这在需要同时运行多个动画时非常有用。
.element {
animation-name: slide-in, fade-in;
animation-duration: 2s;
}
转载请注明出处:http://www.zyzy.cn/article/detail/4103/CSS