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 向前和向后填充模式都被应用

相关文章
相关标签/搜索