CSS3新增了一个令人心动的属性：animation，尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽，但是从代码量和浏览器性能上有着明显的优点。
    CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key  frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
    animation基本用法是：
    animation: name keeping-time animate-function delay times iteration final;
    第一个参数：name (animation-name)：
    动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如：
    @-webkit-keyframes name{
    0%{
    opacity: 0;
    }
    100%{
    opacity: 1;
    }
    }
    前缀-webkit-表示webkit内核浏览器（Chrome、Safari和变心的opera），以上代码定义了一个动画，名叫name，效果是使透明度从0变化到1,0%——100%为整个过程，当然也可以定义多段如：0%——20——50%——100%。
    第二个参数：keeping-time (animation-duration)：
    整个动画的持续时间，必须带上时间单位，s或者ms均可；默认值为 0，意味着没有动画效果。
    第三个参数：animate-function (animation-timing-function)：
    设置动画如何完成一个周期，运动方式（动画方式）的贝赛尔曲线，可取值为：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
    值：linear  匀速
    ease   先慢后快，结束前变慢     默认
    ease-in    低速开始
    ease-out  低速结束
    ease-in-out   低速开始和结束
    cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
    第四个参数：delay (animation-delay)：
    动画在启动前的延迟间隔，动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效。
    第五个参数：times (animation-iteration-count)：
    动画循环执行的次数，无单位，默认值1。infinite为无限循环。
    第六个参数：iteration (animation-direction)：
    如果动画循环，循环的方式是：alternate(在奇数次正向播放，在偶数次反向播放)、alternate-reverse（在奇数次反向播放，在偶数次正向播放）、normal(正常播放)、reverse（反向播放）、
    第七个参数：final (animation-fill-mode)：
    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
    值：none   默认，播放完动画后，画面停在起始位置
    forwards     播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
    backwards   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
    both   设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）
    每个参数也可以单独写，最后用的时候记得加浏览器前缀：
    .classname{
    -webkit-animation:name 6s linear 0ms infinite normal forwards;
    -moz-animation:name 6s linear 0ms infinite normal forwards;
    -o-animation:name 6s linear 0ms infinite normal forwards;
    animation:name 6s linear 0ms infinite normal forwards;
    }
    将不带前缀的写在最后面好处是等到animation被所有浏览器认可，可以摈弃前缀的时候可以覆盖前面的样式。

本文作者：紫石头原创模板堂

十六年网站建设相关经验
一站式为您提供网站相关服务

欢迎扫码咨询