JavaScript HTML DOM Style animation 属性

  • animation 属性

    animation属性是六个动画属性的简写属性:
    • animationName
    • animationDuration
    • animationTimingFunction
    • animationDelay
    • animationIterationCount
    • animationDirection
    注意:始终指定animationDuration属性,否则持续时间为0,永远不会播放。
    使用速记属性更改<div>元素的动画:
    //  4.0 - 8.0
    document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
    
    // 标准语法
    document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
    
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    animation
    10.0+
    43.0
    4.0 Webkit
    16.0
    5.0 Moz
    9.0
    4.0 Webkit
    30.0
    15.0 Webkit
    12.1
    12.0 -o-
  • 语法

    返回animation属性:
    object.style.animation
    设置animation属性:
    object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
  • 属性值

    描述
    animationName 指定要绑定到选择器的关键帧的名称
    animationDuration 指定动画完成所需的秒数或毫秒数
    animationTimingFunction 指定动画的速度曲线
    animationDelay 指定动画开始之前的延迟
    animationIterationCount 指定应播放动画的次数
    animationDirection 指定动画是否应在交替循环中反向播放
    animationFillMode 指定动画在执行时间之外应用的值
    animationPlayState 指定动画是正在运行还是暂停
    initial 将此属性设置为其默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息
  • 技术细节

    项目 描述
    默认值: none 0 ease 0 1 normal none running
    返回值: 一个String,表示元素的动画属性
    CSS版本 CSS3
  • 相关页面

    CSS参考:animation属性