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

posted on 2019-10-18 16:03  Godfather-twq  阅读(204)  评论(0编辑  收藏  举报