首页>前端教程>CSS教程

CSS3第十二课:强大的多时间段animation动画!

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

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

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

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

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

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

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

  • 初始状态,0%的时候,球在最左边。

  • 结束状态,100%的时候,球在右边400px处。

  • 用时2秒钟。

  • 匀速运动。

  • 只运行一次。

  • 计算机根据运动对象状态的差异,自动产生补间动画。

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

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

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

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

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

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

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

See the Pen animation动画案例1 by zhaolanzhen (@mrszhao) on CodePen.

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

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

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

See the Pen animation动画案例2 by zhaolanzhen (@mrszhao) on CodePen.

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

See the Pen animation动画案例3 by zhaolanzhen (@mrszhao) on CodePen.

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

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

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

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

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

See the Pen animation动画案例4 by zhaolanzhen (@mrszhao) on CodePen.

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

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

See the Pen animation动画案例5 by zhaolanzhen (@mrszhao) on CodePen.

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

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

See the Pen animation动画案例6 by zhaolanzhen (@mrszhao) on CodePen.

总结一下,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动画

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执行。以此类推。

See the Pen animation动画案例7 by zhaolanzhen (@mrszhao) on CodePen.

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

点赞


15
保存到:

相关文章

Top