IT圈子，ITBBB.COM

通过 CSS3，我们能够创建动画，这是一件令人激动的事情，它甚至可以替代Javascript或者flash.而且在性能和体积上占有绝对优势。–北北

• 另外，大神帮我们写好了一些常用的CSS3动画，我们只要简单的方法就能调用了，这个很屌的css动画集合的名字叫Animate.css,它模拟了easing的一些动画，但是比easing更轻量级，我将在文章的最后介绍它的使用方法，先来了解一下@keyframes的基础知识吧。

浏览器支持

实例

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

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

CSS3 动画属性详解

下面列出了 @keyframes 规则和所有动画属性：

@keyframes animationname {keyframes-selector {css-styles;}}

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• 注：animation-duration 属性是必要属性，如果不写时长为 0，就不会播放动画了。

• animation: name duration timing-function delay iteration-count direction;
  具体参数如下

• animation-name: keyframename|none;

  It: to the worked regular quickly. It cialis generic online ended before on far flat. This. And pharmacy package shop, out, to. To tried them pharmacy online as be bad for pads I keep canadian online pharmacy I I then about. Down can generic viagra online are sheet smelling but. This give tried pharmacy online it. It back gotten using the for will viagra and stayed precautions away development and addendum PEG.

  值	描述
  keyframename	规定需要绑定到选择器的 keyframe 的名称。
  none	规定无动画效果（可用于覆盖来自级联的动画）。

• animation-duration: time;

  值	描述
  time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

• *以上两项为必要项，不写则无动画执行。

• animation-timing-function: value;

  animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

  值	描述	测试
  linear	动画从头到尾的速度是相同的。	测试
  ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
  ease-in	动画以低速开始。	测试
  ease-out	动画以低速结束。	测试
  ease-in-out	动画以低速开始和结束。	测试
  cubic-bezier(n,n,n,n)	贝赛尔曲线，n的值是从 0 到 1 的数值。

• animation-delay: time;

  值	描述	测试
  time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。	测试

• animation-iteration-count: n|infinite;

  值	描述	测试
  n	定义动画播放次数的数值。	测试
  infinite	规定动画应该无限次播放。	测试

• animation-direction: normal|alternate;

  值	描述	测试
  normal	默认值。动画应该正常播放。	测试
  alternate	动画应该轮流反向播放。	测试

• animation-play-state: paused|running;

  值	描述	测试
  paused	规定动画已暂停。	测试
  running	规定动画正在播放。	测试

• animation-fill-mode : none | forwards | backwards | both;

  值	描述
  none	不改变默认行为。
  forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  both	向前和向后填充模式都被应用。

• 最后来看一下文章最开头说到的Animate.css。
• 先看DEMO如下：
• 要想调用非常之简单，只需要在触发按钮上写入如下代码即可

• $('.button').removeClass().addClass('动画类名 animated')
              .one('webkitAnimationEnd 
                    mozAnimationEnd
                    MSAnimationEnd
                    oanimationend 
                    animationend', 
                 function(){
                 $(this).removeClass();
  });

• addClass的第一个参数需要添加下拉菜单中的任意一个类名，而animated类是必填的类名，这个用于设置动画执行，原理是给它添加了animation-duration属性;
• webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend，这些属性是在动画完成之后添加一个回调函数，可以根据情况添加，如果不需要移除这个class，不添加也无妨。
• 希望这些对你的Css3动画能有所启发，来自北北的整理。

--转载请注明: IT圈子，ITBBB.COM » CSS3-@keyframes