目录

style animation 属性

示例

使用简写属性更改 <div> 元素的动画:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
亲自试一试 »

描述

动画属性是六个动画属性的简写属性:

动画名称
动画持续时间
动画定时函数
动画延迟
动画迭代次数
动画方向

笔记:始终指定animationDuration属性,否则持续时间为0,并且永远不会播放。


语法

返回动画属性:

object.style.animation

设置动画属性:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"


属性值

Value Description
animationName Specifies the name of the keyframe you want to bind to the selector
animationDuration Specifies how many seconds or milliseconds an animation takes to complete
animationTimingFunction Specifies the speed curve of the animation
animationDelay Specifies a delay before the animation will start
animationIterationCount Specifies how many times an animation should be played
animationDirection Specifies whether or not the animation should play in reverse on alternate cycles
animationFillMode Specifies what values are applied by the animation outside the time it is executing
animationPlayState Specifies whether the animation is running or paused
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

技术细节

默认值: 无 0 缓解 0 1 正常 无运行
返回值: 一个字符串,表示元素的动画属性
CSS版本 CSS3

浏览器支持

animation是 CSS3 (1999) 的一项功能。

所有浏览器都完全支持它:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 11

相关页面

CSS 参考:动画属性