CSS3 Animations-记CSS3动画基础（三）

最近的感触很大，感觉自己有点漂浮，有点不在状态，然后也遇到了一些苦逼的时候，在这个拼爹，拼金钱钱的时代，你不拼命你就完了。打住，接着说CSS3动画，目前用Transform，Transition可以创建一些简单有趣的动画了，不过CSS3里面还有一个强大的动画属性，现在的主题就是它：CSS3 Animation。

还是先看看这些晦涩难懂的语法(animation)，大概就是这几个属性值：

    animation  [animation-name || animation-duration || animation-timing-function || animation-delay ||
               animation-iteration-count || animation-direction || animation-fill-mode]

1、animation-name

CSS3 动画，用animations创建动画，需要创建@keyframes规则，来实现。所谓的@keyframes就好像是一个Function，它规定该怎样去具体的实现一个动画过程。而这个function的名称，就是animation-name，所以我们再使用animation的时候需要先定义一个@keyframes。

2、@keyframes

@keyframes 规则：

    keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
    keyframes-blocks: [ keyframe-selectors block ]* ;
    keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

@keyframes 的用法(以背景变换为例)：

    @keyframes animationName
    {
      from {background: red;}
      to {background: yellow;}
    }

参数变换过程：from 起始位置/to 结束位置，变换过程参数，也可以用百分比来表示，如：

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

定义好@keyframes规则过后，我们就需要在指定的时候调用它，就行了。@keyframes 功能很强大，这里只是简单的背景颜色的示例，它可以添加很多你可以想到的具体的动画变换内容。

3、animation-iteration-count

animation-iteration-count,动画循环次数，默认为1,如果需要永久循环，值为：infinite.

4、animation-direction

animation-direction,是否反向循环动画，默认为:'normal'，alternate,反向循环。当方向循环是timing-fuction也会循环，如：ease-in当其反向循环时，会用ease-out出现。

5、animation-play-state

animation-play-state,动画播放状态，可以配合Javascript控制动画的播放状态。running | paused

6、animation-fill-mode

animation-fill-mode,定义动画播放完后的状态，因为每个动画播放都有开始状态和结束状态，在不同状态有不同的CSS样式，故该属性有四个值：none\forwards\backwards\both。none当动画完成后，不保留任何动画之中的样式，forwards,保留动画播放结束时的样式，一般在keyframes中的100%。backwards，保留动画开始时的状态，一般在keyframes中的0%。both,保留开始和结束时的状态。

关于CSS3动画的DEMO，可以参看CSS3 制作Loading效果DEMO ,以上是animation的各个参数，其他没有提到的参数和Transition里面的大同小异。

FITURE