CSS3 Animation

[Renhua Liu]

Animation

与transition十分相像，属性略有差异，下面来看看她有哪些属性

• animation-name keyframe名称（类似于transition的css属性，只不过这个是自己定义的keyframe）
• animation-duration 动画所花费的时间（同transition）
• animation-timing-function 速度曲线（同transition）
• animation-delay 动画开始前的延迟（同transition）
• animation-iteration-count 动画播放的次数
• animation-direction 动画播放的方向

animation-durating animation-timing-function animation-delay 这三个属性与transition 类似，忽略这块

animation-name

div
{
    animation-name:mymove;
    animation-duration:5s;
    animation-name:mymove;
    animation-duration:5s;
}

@keyframes mymove
{
         from {left:0px;}
         to {left:200px;}
}

如上面例子 可知 animation-name 是可以任意名称。这个名称用 keyframes来定义

@Keyframes中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，可创建多个百分比

例子中"from" "to"代表“0%”到”100%“

注意0% 不能省略%

@Keyframe 的语法综合起来如下

 @keyframes yourMoveName {
     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;
      }
    }

yourMoveName : 就是 duration-name 所要用到值，随便取，语义化更好

Percenttage: 百分之，可添加多个这样的百分值

Properties: css属性名,比如left,background

value: 就是响应的属性值

注意！animation目前只支持webkei内核的浏览器，所以需要在上面的基础上加上-webket 前缀

div
{
     animation-name:mymove;
      animation-duration:5s;
     -webkit-animation-name:mymove;
     -webkit-animation-duration:5s;
}

@keyframes mymove
{
     from {left:0px;}
     to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {left:0px;}
    to {left:200px;}
}

animation-iteration-count

transition 是触发后发生的一次动画，
animation 动画如flash，可重复播放，得亏 animation-iteration-count 属性，自定义次数，infinite为无限次

animation-direction

指定动画播放的方向，默认值是noraml,另一个值alterante 是反向的意思.偶数次反向执行动画

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

@keyframes myfirst
{
     0%   left:0px; top:0px;}
     25%  {left:200px; top:0px;}
     50%  {; left:200px; top:200px;}
     75%  {en; left:0px; top:200px;}
     100% {left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
     0%   left:0px; top:0px;}
     25%  {left:200px; top:0px;}
     50%  {; left:200px; top:200px;}
     75%  {en; left:0px; top:200px;}
     100% {left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
     0%   left:0px; top:0px;}
     25%  {left:200px; top:0px;}
     50%  {; left:200px; top:200px;}
     75%  {en; left:0px; top:200px;}
     100% {left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
     0%   left:0px; top:0px;}
     25%  {left:200px; top:0px;}
     50%  {; left:200px; top:200px;}
     75%  {en; left:0px; top:200px;}
     100% {left:0px; top:0px;}
}

例子demo 效果 http://www.w3school.com.cn/tiy/t.asp?f=css3_animation3

兼容性

针对低版本的浏览器最好使用前缀-webket-,-moz,-o-.-ms-
关于低版本的IE,动画建议使用JS处理，css3不要勉强。浏览器兼容图如下

[风知]

顺便贴一下浏览器兼容性支持吧 ie里不支持