前言上一篇css3动画（三）动画介绍，只是简单介绍了动画的子属性，并没有真正使用到。本文通过阅读css动画库animate.css，加深对css3动画属性的理解。animate.cssanimate.css是一个css动画库，里面有很多动画效果。动画效果演示用法Example加上基础类animated和动画类flash，就会出现“闪烁”的动画效果。动画分类通过查看demo，可以看到动画库的动画类型分为14类：AttentionSeekersBouncingEntrancesBouncingExitsFadingEntrancesFadingExitsFlippersLightspeedRotatingEntrancesRotatingExitsSlidingEntrancesSlidingExitsSpecialsZoomingEntrancesZoomingExits根据animate的源码目录分为4类。css文件夹：_base.css基础类首先看_base.css中的基础类：.animated{animation-duration:1s;animation-fill-mode:both;}.animated.infinite{animation-iteration-count:infinite;}.animated.delay-1s{animation-delay:1s;}.animated.delay-2s{animation-delay:2s;}.animated.delay-3s{animation-delay:3s;}.animated.delay-4s{animation-delay:4s;}.animated.delay-5s{animation-delay:5s;}你可以看到：.animate基类设置了动画的两个子属性：animation-duration和animation-fill-mode。他们的值都是1s，都是。animation-fill-mode详解。animate.infinite基类设置要无限播放的动画数量。animated.delay-ns基类设置动画延迟示例：flash动画源码那么我们来看一个动画示例源码：flash.css@keyframesflash{from,50%,to{opacity:1;}25%,75%{不透明度:0;}}.flash{animation-name:flash;}在flash.css中，首先定义一个名为flash的关键帧序列：@keyframesflash{from,50%,to{opacity:1;}25%,75%{不透明度:0;}}在0%,50%,100%keyframes,styleopacity为0.在25%and75%keyframes,styleopacity为1.那么下面有一个.flash类,以flash为值animation-name属性的，flash是上面定义的关键帧的名称，通过添加flash类，可以让元素具有“flash”动画效果！小结通过上面例子中一个flash动画源码的阅读，加深了对css3动画属性的使用。
