css3中的动画

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

1.什么是动画呢？

　　动画就是一种状态随着时间的变化进行着变化，在不同时间显示的不同状态。

使用css3中的动画

一、创建一个动画

创建一个动画的一个关键属性，@keyframes name{}

兼容的那些问题：

        @keyframes my{   //创建一个动画,并且给一个动画名字
            from{}
            to{}
        }
        @-moz-keyframes my{
            from{}
            to{}
        }
        @-ms-keyframes my{
            from{}
            to{}
        }
        @-webkit-keyframes my{
            from{}
            to{}
        }

接下来讲解创建一个动画的关键问题：

    @keyframes my{   //创建一个动画,并且给一个动画名字
            from{background: #f00;} //from是一个动画的开始时候关键帧
　　　　　　　//动画开始时候的状态

            to{background: #000;}  //to是一个动画结束的时候的关键帧
　　　　　　　　//动画结束时的状态

        }

当然一个动画也可以有很多关键帧，这时候只有from to 就不够用了，我们还有百分比的关键帧：

@keyframes my
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes my /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes my /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

二、创建完动画后，我们需要将我们创建的动画绑定到我们需要添加的元素选择器上。

 

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

2、分解animation属性
　　　　animation-name 规定 @keyframes 动画的名称。
　　　　animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
　　　　animation-timing-function 规定动画的速度曲线。默认是 "ease"。
　　　　属性值：
　　　　　　linear 动画从头到尾的速度都是相等的
　　　　　　ease 默认 动画以低速开始，然后加快，结束时减慢
　　　　　　ease-in 动画以低速开始
　　　　　　ease-out 动画以低速结束
　　　　　　ease-in-out 动画减速开始和结束
　　　　　　cub-bezier(n,n,n,n) 在这个函数中设置自己的值。可能值是0-1的数值
　　　　animation-delay 动画开始的时间
　　　　animation-iteration-count 动画播放次数
　　　　animation-direction 动画是否在下一周期逆向播放 默认值为 normal
　　　　　　属性值：
　　　　　　　　normal 动画正常播放
　　　　　　　　alternate 动画应该轮流反向播放。
　　　　animation-play-state 规定动画是否正在运行或者暂停 默认值是running
　　　　　　属性值：
　　　　　　　　paused 动画已暂停
　　　　　　　　running 动画正常播放
　　　　animation-fill-mode 规定对象动画时间之外的状态
　　　　　　属性值：
　　　　　　　　none 不改变默认行为
　　　　　　　　forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
　　　　　　　　banckwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
　　　　　　　　both 向前和向后填充模式都被应用