首页 > HTML5与CSS3.0 > CSS3强大的多时间段动画animation

CSS3强大的多时间段动画animation

作者: 分类:HTML5与CSS3.0 点击: 11,257 次

    animation动画与transition过渡动画有两个明显的区别:

    1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。

    2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段执行第二个动画。而且动画是默认执行,不需要用户事件触发。

    一、animation动画要执行的必要条件

    1、先设置一个动画片段,利用“帧”(frame)的概念,学习过flash的人又有优越感了。

    比如,最简单的,让一个球用2秒钟的时间从左边匀速滚动到右边400px的位置。

    这句话包含了如下几个信息。

    • 初始状态,0%的时候,球在最左边。
    • 结束状态,100%的时候,球在右边400px处。
    • 用时2秒钟。
    • 匀速运动。
    • 只运行一次。
    • 计算机根据运动对象状态的差异,自动产生补间动画。

    那么可以把上面分析出来的信息代码化。

    move是该动画片段的名字。这是语法格式如下:

    CSS
    @keyframes move{
      0%{
        transform:translateX(0);
      }
      100%{
        transform:translateX(400px);
      }

    2、为运动对象添加animation动画。

    CSS
    #ball{   
        width:100px;   
        height:100px;   
        border-radius:50%;   
        background-color:#A94CAF;   
        animation:move 2s linear;  /*动画名称   执行的时间   匀速运动*/
        }

    观察动画效果会发现,动画默认执行1次,结束后并不会停留在最终状态,而是恢复到初始状态。

    提示:点击codepen编辑器右下角的RERUN按钮,可以再次播放效果。点击左上角edit on codepen,可以打开codepen网站编辑该代码。

    二、利用animation-delay属性设置动画延时的时间,利用animation-iteration-count属性设置运动次数。

    如果不需动画立即执行,可以设置延时时间,第一个时间为执行时间,第二个为延迟时间。还可以设置执行次数,次数没有单位。

    CSS
     animation:move 2s linear 1s 2;  /*动画名称   执行的时间   匀速运动  延迟1s执行  执行2次*/

    如果希望是无限次,可以设置为infinite.

    三、利用animation-direction属性改变运动方向。

    CSS
    animation-direction:normal | reverse | alternate | alternate-reverse

    reverse:反转、颠倒的意思。表示反向运动。

    alternate:交替,轮流的意思。这个值表示正反交替着运动,

    alternate-reverse:表示默认反向运动,反正交替运动。

    四、利用animation-fill-mode属性改变运动结束的状态.

    CSS
    animation:move 2s ease forwards  ; /*动画结束后,停留在结束状态。*/

    五、利用animation-play-state可以暂停动画。默认是running值。

    CSS
    #ball:hover{
      animation-play-state:paused; /*当前状态暂停动画*/
    }

    总结一下,animation动画共如下这几个属性,后面的是默认值:

    • animation-name: none                           动画名称
    • animation-duration: 0s                           执行时间
    • animation-timing-function: ease           加减速贝塞尔曲线,与transition的缓动动画原理一样。
    • animation-delay: 0s                               延迟时间
    • animation-iteration-count: 1                 执行次数
    • animation-direction: normal                  默认运动方向
    • animation-fill-mode: none                     默认运动后恢复到初始状态
    • animation-play-state: running               默认处于运动状态

    六、多个片段的animation动画

    CSS
    animation:tiantiao1 0.5s ease-in  forwards,  
              tiantiao2 0.2s ease-out 0.5s  forwards,
              tiantiao3 0.2s ease-in 0.7s  forwards,
              tiantiao4 0.15s ease-out 0.9s  forwards,
              tiantiao5 0.15s ease-in 1.05s  forwards,
              rightMove 0.4s ease-out 1.2s  forwards;

    第一个动画片段执行完后,再执行第二个动画片段。第一个动画执行0.5s,所以第二个动画要延迟0.5s执行,第三个动画延迟0.7s执行。以此类推。

    是不是觉得animation动画的确比transition过渡动画厉害呢,突然有点怀念flash,莫名的伤感。



文章作者:zhangxuan
本文地址:http://wanlimm.com/77201809126886.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

2条回应:“CSS3强大的多时间段动画animation”

  1. avatar wangwei1987说道:

    animation需要学习的还很多。

  2. avatar 鹤望岚说道:

    居然在这里发现了自己的原创文章。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.