网页动效之CSS篇

在网页中实现动画效果有很多种方式，例如由js控制的canvas、svg、elements动画，还有由css3控制的svg和elements动画等（还有flash？）。css实现elements动画主要通过transition（过渡效果）和animation（动画）来控制。其中animation通过其强大的函数自定义化和丰富的控制接口以及css3与生俱来的流畅高速渲染效果，成为了动画大军的一只劲旅。

在制作一些简单的、动画元素少的、交互小的动画。css3的animation是最好的选择。
这篇文章的主题就是，用好animation的技巧。基础知识网上一大把就不说了。

Tips1:控制动画开始执行时刻

我们从例子出发，假如我们想要一个小球，在某个时刻（例如点击了一个按钮）向左动一下。这时我们就可以借助 animation-play-state 这个属性。

animation-play-state 属性规定动画正在运行还是暂停。

假设我们需要动画的元素为.ele，.ele的上级为.ele-wrap，那么我们可以这样写css：

.ele-wrap .ele{animation-play-state:paused;}

.playing .ele{animation-play-state:running;}

.ele{animation:moveToLeft 1s;}

当我们给ele-wrap 加上playing（例如通过点击事件添加）的时候，这个时候ele就会动起来。

通过这种方法，我们能更加方便清晰地控制某些区域下元素的动画开始执行时刻。

Tips2:叠加动画

animation 是支持叠加动画的写法的，看代码

.ele{animation:fadeIn 1s,sildeLeft 1s}

这个写法的意思是让元素渐显同时向左移动。

这里有一点要注意的是，如果后面的动画改变的元素属性和前面的动画一样的话，那么前面动画的属性改变就失效了。

.ele{animation:fadeIn 1s,sildeLeft 1s,sildeUp 1s}

如果是上面这种写法，那么sildeLeft将被忽略。

另外一种实现方法是采用元素嵌套。

通过给动画元素外包一个父级元素，然后给父级和子级分别加上动画。

.ele-wrap{animation:fadeIn 1s}

.ele-warp .ele{animation:slideLeft 1s}

Tips3:连接动画

通过animaiton的animation-delay可以实现动画连接。比如上个例子我们不要两个动画同时进行，我们想元素渐显后再向左移动，那么我们可以这样写：

.ele{animation:fadeIn 1s,sildeLeft 1s 1s}

sildeLeft后面的第一个1s是指动画执行时间，第二个1s是指动画延迟多久才执行。这样写元素就会延迟1s才向左边移动。

与Tips2一样，用元素嵌套方式可以连接数目更多的动画。

Tips4:规定动画执行位置

animation-delay允许负值，负值动画将马上开始，然后跳过动画的前N秒。比如我们希望ele直接就向左移动就可以这样写：

.ele{animation:fadeIn 1s -1s,sildeLeft 1s}

这样写fadeIn马上执行，而且是从原本执行1s后的状态开始执行。

Tips5:来回播放动画

animation-direction属性在某些情况很好用。比如你想让元素按照轨迹来回移动。按照常规方法你要这样写：

 @keyframes move{
     0%,100%{transform:translate(0,0);}
    25%{transform:translate(0,120px);}
     50%{transform:translate(120px,120px);}
    75%{transform:translate(0,120px);}
  }

.ele{animation:move 4s infinite}

如果用animation-direction ，只要这样

@keyframes move{
     0%{transform:translate(0,0);}
     50%{transform:translate(0,120px);}
    100%{transform:translate(120px,120px);}
 }

.ele{animation:move 4s infinite alternate}

当然了这只是简单的一个例子。

未完待续。。