css3 动画最简单的例子

前言

最近开发中遇到的动画特效非常的频繁，加上之前开发是用到animation.js这个动画库，对动画的属性一知半解，so 今天来了解一下做个记录。

CSS3动画基础属性

其实也就是一张图就能概括了

@keyframes的语法属性

  /*
    animationname : 定义一个动画名称
    keyframes-selector：动画区间百分比 
      合法值：
            0-100%
            from (和0%相同)
            to (和100%相同)
            注意： 您可以用一个动画keyframes-selectors。
    css-styles：一个或多个合法的CSS样式属性
  */

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

  /*例子*/
  @keyframes mymove{
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
  }

animation的语法和属性

属性可以看最上面的那张图，语法如下：

  /*这里的name就是上面@keyframes 中定义的animationname（动画名称）*/
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;

其实到这里核心的东西都差不多了，有遗漏的地方还请留意补正。

css3 动画最简单的例子