
定义和用法
animation-name
是 CSS 动画属性之一,用于指定应用在元素上的关键帧动画名称。动画名称区分大小写
animation-name
必须与@keyframes
规则定义的名称匹配。
animation-name
不能使用 CSS 关键字作为动画名称(如initial
,inherit
,unset
等)。
常用的实例
接下来通过多个实例演示animation-name
属性的用法,来深化您对animation-name
属性的理解。
.element {
animation-name: slide-in;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
CSS 语法
animation-name: keyframename|none;
属性值
值 | 描述 |
---|---|
keyframename |
规定需要绑定到选择器的 keyframe 的名称。 |
none |
规定无动画效果(可用于覆盖来自级联的动画)。 |
浏览器支持
下表中数字注明了完全支持animation-iteration-count
属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
![]() |
![]() |
![]() |
![]() |
![]() |
43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
32
章节
14
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈