CSS3中的动画

animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

设置关键帧


@keyframes spread {
   
0%  {width:0;}
   
33% {width:23px;}
   
66% {width:46px;}
   
100% {width:69px;}
 
}
注意:写兼容的时候浏览器前缀是放在@keyframes中间
例如:@-webkit-keyframes、@-moz- keyframes


调用关键帧
语法:
animation:animation-name  animation–duration  animation-timing-function 
animation-delay  animation-iteration-count  animation-direction  
animation-play-state  animation-fill-mode;

animation-name: 由@keyframes创建的动画名称
animation–duration: 动画时间
animation-timing-function: 动画方式
animation-delay: 延迟时间

animation-iteration-count: 动画的播放次数值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

animation-direction: 动画的播放方向
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放

animation-play-state: 动画的播放状态
running将暂停的动画重新播放
paused将正在播放的元素动画停下来

animation-fill-mode: 动画开始之前和结束之后发生的操作
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果

示例:
/*创建动画关键帧*/
        @keyframes spread {
            0%{
                width: 0;
            }
            25%{
                width: 20px;
            }
            50%{
                width: 50px;
            }
            75%{
                width: 70px;
            }
            100%{
                width: 100px;
            }
        }


/*调用动画*/


            animation: spread 2s linear infinite;
            -webkit-animation: spread 2s linear infinite;
            -moz-animation: spread 2s linear infinite;
            -o-animation: spread 2s linear infinite;