6. CSS3 animation动画 - 转风车、loding加载、人物走路等示例

仅供学习，转载请注明出处

CSS3 animation动画相关参数

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

看了上面的这么多动画效果的相关参数，估计还是不太理解，那么下面先来一下快速入门示例

快速入门示例 - div长度伸缩动画效果

二话不说，先手写一个div正方形。那么下一步就是设置一个动画效果，伸缩扩展这个正方形div的宽度。

上面的代码就是当鼠标移动到div上，则在1秒内执行完expanding的动画效果，从原来的宽度width:300px变为width:600px的效果。

代码如下：

animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)

其实这个跟transition的过渡参数是一样的。

刚才上面的扩展动画效果比较生硬，增加一个缓冲效果来看看，如下：

animation-delay 动画延迟

设置1秒延迟的效果，不会立即呈现动画效果。

animation-iteration-count 动画播放次数 n|infinite

设置了这个参数，那么动画效果就会播放多次，这里填写参数为5，那么就会执行5次。

如果填写infinite，那么就会执行无限次。

animation-direction 动画结束后是否反向还原 normal|alternate

如果需要有反向的动画效果，需要填写alternate，如下：

animation-play-state 动画状态 paused(停止)|running(运动)

这个参数是用来控制动画效果的开始以及停止的。

例如：我将上面的代码改一改，就是div原来自动在一直不停地伸缩，鼠标移动上去就停止。

那么默认如果就是pasued的状态，试试等鼠标移动上去就改为running状态看看效果。

练习一：风车动画

看完上面的参数应该已经基本知道animation动画的使用方法，下面来看看这张图片，如下：

fengche.png

制作一个动画效果，让这个风车不停地旋转。那么其实只要设置无限播放，然后动画效果使用transform中的rotateZ参数，进行360度地旋转即可。

实现如下：

要注意的是这个风车的旋转是使用Z轴的，也就是说屏幕正对着你的方向。

代码如下：

练习二：loading动画

分析思路：
首先写五个div，并且设置好对应的样式。然后写一个动画效果，给每个div动画伸展Y轴的大小，最后给每个动画效果做一个延时，这样就可以做好了。

下面来实现代码看看，如下：

完整代码如下：

    
    
    


    

        

        

        

        

        

        
loding...
    

练习三：人物走路动画，动画中的step用法

动画中使用的图片如下：

从上图来看，我的第一印象就是写一个绝对定位，然后left图片的动画效果，此时动画效果不能用匀速、缓冲移动的方式，要才用step步数的方式。

首先看看图片的宽度，如下：

图片的移动使用step方式是需要设置整体宽度的，并且设置为8个步数，因为里面有8个动作图片。

下面实现来看看，如下：

代码如下：

---