css3动画属性animation

文章目录

在前面已经学习过了css3中的transitioncss3动画属性)、transform(css3变形属性)。今天来学习另外一个css3动画属性animation,这个是不是跟我们jQuery中的animate很相似呢?

我们也知道transition可以做到从一个状态变化到另一种状态的变化。代码类似于:transition:color 0.2s easy-in-out .1s;

那么为什么还需要这个animation属性呢?原因可能是transition太局限了,通过animation可以通过百分比来进行几个状态切换。从0%到20%到40%。到60%到100%。是的,这就是这个animation的功能所在了。

CSS3动画

使用CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画和JavaScript

CSS3关键帧规则

要创建CSS3的动画,你必须了解@关键帧规则(Keyframes)。

@关键帧的规则是创建动画。@关键帧规则内指定CSS风格和动画将逐步从目前的风格改变为新的样式。

浏览器支持

浏览器支持

 @keyframes IDENT {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
   }
   或者全部写成百分比的形式:
   @keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

 

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

animation的属性有下面这么几种内容:

     -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
     -webkit-animation-delay: 2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/

你可以在这里查看更多的案例:http://www.w3cplus.com/content/css3-animation

更多内容请参考W3c

原文链接:css3动画属性animation 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css3-animation.html)

发表评论

请登录后发表评论: