席新亮'; ?>

首页 / css3

这是我见过最全讲解CSS3动画的文章

By 席新亮 •  2016-12-07 15:06:40 •  508次点击

引言


在上一期文章中@乐乐乐乐乐 及一些其他好心用户留言“讲讲CSS3动画”,应邀本期和大家唠唠。

CSS3是什么

CSS即层叠样式表(Cascading StyleSheet),主要用于页面的UI美观,例如布局、字体、颜色、背景等。如果你使用过旧版本的CSS,那么对于CSS3页不会太陌生,只是它的升级版本。

为什么诞生CSS3动画

在PC互联网时代,估计很多玩JavaScript的小伙伴刚学之时,是因为它的酷炫效果把你吸引了。但,移动互联网时代到来之后,JavaScript的性能似乎在移动设备上发挥不到极致,而且还会产生一些细节问题。才这样的情景之下,CSS3动画就登上技术历史舞台了,它不但在支持HTML5的设备上节省性能开支,还有很好的兼容性,可以替代很多老旧的技术(Flash动画、Gif图、JavaScript动画等)。

CSS3动画入门

CSS3动画的运行构成主要包含:

  • 动画声明

  • 引用运行


动画声明

主要用于告诉支持CSS3动画的宿主环境(浏览器)我要开辟一块动画范式,构成如下:

@keyframes 动画名称 {

        样式渐变关键帧序列

}

说明:

  • @keyframes,声明动画的关键字

  • 动画名称,用于标识动画,方便引用运行

  • 样式渐变关键帧序列,用样式描述对象在不同的阶段所展示的状态,中间部分一般有宿主内部处理


代码示例:

@keyframes demoAnimate
{
        from {background: yellow;}
        to {background: green;}
}

讲解:

动画的过渡节奏,主要用“from”开始动画,“to”结束动画,也可以使用“0%”到“100%”的方式,建议使用百分比的方式,对浏览器更加友好。


引用运行

声明完动画之后,就可以使用“animation”引用到指定的dom,引用的语法如下:

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

这些属性的具体用法如下图:

图示太小,点击放大观看

代码示例:

.aniOne{
      animation: demoAnimate 2s;
}

讲解:

  • demoAnimate表示引用的动画声明名称

  • 2s表示动画的运行时间

为了让以上的代码运行,咱们创建一个div样式与div,代码如下:

/* CSS的div样式*/

div{
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      color: #ffffff;
      background: green;
      position: relative;
      margin-top: 1px;
}

<!--html 的 div节点-->

<div class="aniOne">CSS3 颜色渐变</div>


目前,并不是所有浏览器都支持CSS3动画,在此为大家贴出用于检测CSS3动画支持程度的代码:

图示太小,请点击查看

保持动画结束状态

估计大家都已经注意到,在CSS3动画结束之后,并不能保持动画的最后状态。例如,一个div默认是红色,动画效果是红色至绿色,但是动画效果播放完毕之后,div又变回红色了,而不是绿色。那么,如何保持动画结束之后的状态呢?

在“animation”引用属性中,有一个属性“animation-fill-mode”用于规定动画之前与结束之后保留的状态模式,详细如下图:

图示太小,点击放大观看

其中,“forwards”是主要起作用的属性,将上边的示例代码变更之后如下:

.aniOne{
      animation: demoAnimate 2s ease 1 forwards;
}

CSS3动画事件

在产品开发中,会遇到一些业务场景,需要CSS3动画开始、结束、复方的时候,能够与JavaScript结合,处理一些程序逻辑。在最新的HTML5中为JavaScript新增加了CSS3动画事件类型,用于监测CSS3动画的执行状态。

animationend 事件在 CSS 动画完成后触发,主要如下:

  • animationstart动画开始后触发

  • animationiteration动画重复播放时触发 

  • animationend动画完成后触发


提示,webkit内核的浏览器可以加前缀“webkit”,例如“webkitAnimationEnd”。


在以上的HTML节点的元素上增加id“animationendDiv”,代码如下:

<div class="aniOne" id="animationendDiv">CSS3 颜色渐变</div>

增加JavaScript如下:

请注意,支持此事件的浏览器版本如下:

图示太小,点击放大观看

到目前为止,我们讲解了:

  1. CSS3动画的基本用法

  2. CSS3动画的状态保持

  3. 如何与JavaScript结合处理业务逻辑

剩下的一些其它属于就比较好理解了,等着你自己去探索。

优秀的判断力来自经验,但经验来自于错误的判断 – Fred Brooks


JS攻城师

你若有前端干货,欢迎前来投稿,一起执笔分享思考。




代码也是一种思考艺术

✬如果你喜欢这篇文章,欢迎分享到朋友圈✬

评论功能现已开启,接受一切形式的吐槽和赞美☺


CSS3动画  CSS3动画教程  CSS3动画事件  北京前端学校  自学前端  前端学校  北京前端培训  前端培训 

2 回复 | 直到2017-02-22 16:25
    宁子  2016-12-07#1 -回复

    读完以后基本对CSS3动画这块的知识完全掌握了。谢谢作者大大。


    西木柚子  2016-12-07#2 -回复

    写的真棒,前端届的一股清流。H5 CSS3的应用解放的JS。而且兼容性也大大提高。谢谢席大大分享。


回复

登录提问 or 还没有账号?去注册