css动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

什么是css3中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

animation属性

animation 属性是一个简写属性，用于设置动画属性，需将其捆绑到选择器中，规定相关的动画效果：

• animation-name

  规定需要绑定到选择器的 keyframe 名称 。(必写)

• animation-duration

  规定完成动画所花费的时间，以秒或毫秒计 。
  （必写，否则为默认值 0，就不会播放动画了。）

• animation-timing-function

  规定动画的速度曲线。（默认值为ease）

  inear：线性过渡。相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  ease：平滑过渡。相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  ease-in：由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  ease-out：由快到慢。相当于贝塞尔曲线(0, 0, 0.58, 1.0)
  ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值

• animation-delay

  规定在动画开始之前的延迟。（默认值为0）

• animation-iteration-count

  规定动画应该播放的次数。（默认值为1）

• animation-direction

  规定是否应该轮流反向播放动画。（默认值为normal）

  动画在循环中是否反向运动，normal 为正向方向，alternate 为向常与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为 normal

• animation-play-state

  规定动画是否正在运行或暂停。(默认是 running)。

• animation-fill-mode

  规定对象动画时间之外的状态。

可以简写为：
animation: name duration timing-function delay iteration-count direction ;

@keyframes关键帧

定义和用法：

通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

@keyframes  jiangcheng
 {
   0%   { margin-top: 0px;}
   10%  { margin-top: 0px;}  //暂停效果
   
   50%  { margin-top: -200px;}
   60%  { margin-top: -200px;}   //暂停效果
   
   90%  { margin-top: -300px;}    //暂停效果
   100% { margin-top: -300px;}
}

还可以用用from和to定义其值

@keyframes jiangcheng
{
    from{opacity: 0; }
    to{opacity: 1; }
}

通过定义其位置与颜色改变其动画效果

@keyframes jiangcheng
{
0%   {background: red; left:0px; top:0px;}
25%  {background: black; left:200px; top:0px;}
50%  {background: yellow; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: blue; left:0px; top:0px;}
}

通过改变%值可以改变其动画的效果

CSS3 动画创建

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长