CSS animation-name 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

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-

CSS animation-iteration-count 属性 CSS animation-play-state 属性

评论区 0

发表评论

教程介绍

CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。

32 章节

12 阅读

0 评论

CSS animation-name 属性

定义和用法

常用的实例

CSS 语法

属性值

浏览器支持

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功