zoukankan      html  css  js  c++  java
  • CSS3 Animation

      animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

    一、animation-name:

    语法:

      animation-name: none | IDENT[,none | IDENT]*;
    

    取值说明:

    animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

    二、animation-duration:

    语法:

      animation-duration: <time>[,<time>]*
    

    取值说明:

    animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。

    三、animation-timing-function:

    语法:

       animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 
    

    取值说明:

    animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。

    四、animation-delay:

    语法:

      animation-delay: <time>[,<time>]*
    

    取值说明:

    animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。

    五、animation-iteration-count

    语法:

      animation-iteration-count:infinite | <number> [, infinite | <number>]* 
    

    取值说明:

    animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。

    六、animation-direction

    语法:

      animation-direction: normal | alternate [, normal | alternate]* 
    

    取值说明:

    animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

    七、animation-play-state

    语法:

       animation-play-state:running | paused [, running | paused]* 
    

    取值说明:

    animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

  • 相关阅读:
    链表-(1)
    爬虫(10-3)验证码图片识别
    爬虫10-2(多线程爬虫)
    分布式爬虫系统的架构(19)
    pipenv管理Python虚拟环境
    peewee-async集成到tornado
    Python3笔记051
    Python3笔记050
    Python3笔记049
    Python3笔记048
  • 原文地址:https://www.cnblogs.com/mrcln/p/3848798.html
Copyright © 2011-2022 走看看