阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS3 animation-direction

    CSS3 animation-direction

    先执行一遍动画,然后再反向执行一遍动画:

    animation-direction:alternate;
    -webkit-animation-direction:alternate; /* Safari 和 Chrome */
    

    浏览器支持

    表格中的数字表示支持该属性的第一个浏览器版本号。

    紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

    属性 IE Chrome FF safari Open
    animation-direction 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-

    定义和用法

    animation-direction 属性定义是否循环交替反向播放动画。

    **注意:**如果动画被设置为只播放一次,该属性将不起作用。

    默认值: normal
    继承:
    可动画化: 否。请参阅 可动画化(animatable)。
    版本: CSS3
    JavaScript 语法: object.style.animationDirection=“reverse”

    CSS 语法

    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
    

    属性值

    描述 演示效果
    normal 默认值。动画按正常播放。 演示效果 »
    reverse 动画反向播放。 演示效果 »
    alternate 动画在奇数次(1、3、5…)正向播放,
    在偶数次(2、4、6…)反向播放。
    演示效果 »
    alternate-reverse 动画在奇数次(1、3、5…)反向播放,
    在偶数次(2、4、6…)正向播放。
    演示效果 »
    initial 设置该属性为它的默认值。请参阅 initial。
    inherit 从父元素继承该属性。请参阅 inherit。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录