当前位置:Web前端 > css> 正文

CSS3动画属性animation

时间:2016-1-11类别:Web前端

CSS3动画属性animation

CSS3动画属性animation

一、animation基本用法

animation: name duration timing-function delay iteration-count direction fill-mode;

 

二、animation属性参数说明

 

1、name (animation-name)

动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如:

 

  •  
  • CSS 代码   复制
  • 
    @keyframes name{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
     }
    
    		
  • 备注:以上代码定义了一个动画,名叫name,效果是使透明度从0变化到1,0%~100%为整个过程,当然也可以定义多段如:0%~20~50%~100%。

     

    2、duration (animation-duration)

    整个动画的持续时间,必须带上时间单位,s或者ms均可;

     

    3、timing-function (animation-timing-function)

    定义动画的速度曲线,值有如下几种

    (1)、ease:动画以低速开始,然后加快,在结束前变慢。

    (2)、linear:匀速

    (3)、ease-in:动画以低速开始

    (4)、ease-out:动画以低速结束

    (5)、ease-in-out:动画以低速开始和结束,相对于ease缓慢,速度更均匀

    (6)、step-start:按keyframes设置逐帧显示,第一帧为keyframes设置的第一帧。

    (7)、step-end:按keyframes设置逐帧显示,第一帧为样式的初始值。

    (8)、steps(<number>[, [ start | end ] ]?):把keyframes里设置的一帧等分为几帧,start为第一次显示第一帧,end第一次显示样式的初始值,例如:steps(4,start)

    (9)、cubic-bezier(<number>, <number>, <number>, <number>):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置,通过调整中间两控制点的位置可以灵活得到常用的动画效果

     

    4、delay (animation-delay)

    动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位

     

    5、iteration-count (animation-iteration-count)

    动画循环执行的次数,无单位,infinite为无限循环。

     

    6、direction (animation-direction)

    指动画时间轴上帧前进的方向。

    (1)、normal:默认值,表示一直向前,最后一帧结束后回到第一帧

    (2)、reverse:与normal的运行方向相反

    (3)、alternate:往前播放完了之后,然后再倒带,倒带到头了再往后播放

    (4)、alternate-reverse:与alternate的运行方向相反

     

    7、fill-mode (animation-fill-mode)

    设置动画结束后的状态

    (1)、none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态

    (2)、forwards:设置对象状态为动画结束时的状态,100%或to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧

    (3)、backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)

    (4)、both:设置对象状态为动画结束或开始的状态,结束时状态优先

     

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐