• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3强大的多时间段动画animation

    CSS3强大的多时间段动画animation

    作者: 分类:HTML5与CSS3.0 点击: 41 次
    wordpress CMS主题:ssmay主题

      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,莫名的伤感。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

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