CSS3之动画实现

实现动画效果有两种方式
（1）设置transition设置过渡，添加transform设置形状，形成动画效果
（2）添加animation属性，设置动画效果

1、transition用于设置过渡效果

transition语法

transition: property duration timing-function delay;

property ：规定设置过渡效果的 CSS 属性的名称。
duration ：规定完成过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始。

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： :hoever :focus :checked 媒体查询触发，javascript触发等

局限：
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

所以才有了animation属性

2、animation属性

用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes myfirstmove{ 
 from{···}
 to{···}
}
@keyframs myfirstmove {
 0% { ··· }
 25% { ··· }
 50% { ··· }
 100% { ··· }
}
/*所有动画结合成一句css语句写的话，可以设置animation属性，分开写也可以*/
animation: name duration timing-function delay 
iteration-count direction;

name:规定需要绑定到选择器的 keyframe 名称
duration :规定完成动画所花费的时间，以秒或毫秒计，取值即为时间
timing-function:规定动画的速度曲线，取值如下：

• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• ease-in 动画以低速开始。
• ease-out 动画以低速结束。
• ease-in-out 动画以低速开始和结束。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

delay:规定在动画开始之前的延迟：取值即为时间
iteration-count:规定动画应该播放的次数：取值即为次数n，默认为infinite（无限次播放）
direction:规定是否应该轮流反向播放动画：取值为normal为默认值，表示动画应该正常播放，alternate表示动画应该轮流反向播放

//javascript语法
object.style.animation="mymove 5s infinite"
object.style.animationTimingFunction="linear"
object.style.animationDelay="2s"
object.style.animationIterationCount=3
object.style.animationDirection="alternate"

请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

兼容实现：
需要在@keyframe和设置动画的元素前面加上前缀

扫描二维码关注公众号，回复： 9585382 查看本文章

@keyframes myfirstmove{  ···  }
@-moz-keyframes myfirstmove{  ···  }  /*firefox*/
@-webkit-keyframes myfirstmove{  ···  }/*safari chrome*/
@-o-keyframes myfirstmove{  ···  }/*opera*/

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

例子如下：

@keyframes change {
    from{
      width:80px;
      height:80px;
      background-color: #CCCCFF;
      left:0;
      top:0;

    }
    to{
      width:50px;
      height:120px;
      background-color: #FFCCFF;
      left:600px;
      top:200px;
    }
  }
.one{
  position:absolute;
  left:0;
  top:0;
  animation:change 5s ease 2s infinite alternate;
}

animation动画如何保存最终状态
在最后添加一行css代码

animation-fill-mode:forwards;