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的效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>@keyframes expanding{from{width: 300px;}       to{width: 600px;}}.box1{width: 300px;height: 300px;background-color: gold;border: 3px solid #000;}.box1:hover{animation: expanding 1s;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

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轴的，也就是说屏幕正对着你的方向。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>@keyframes Rotating{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}.fengche{display: block;width: 400px;height: 400px;animation:  linear Rotating 2s infinite;}</style>
</head>
<body><img src="fengche.png" alt="" class="fengche">
</body>
</html>

练习二：loading动画

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

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

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>@keyframes loding{from{transform: scaleY(0.5);}to{transform: scaleY(1);}}.con{width: 300px;height: 158px;border: 1px solid #000;}.con div{width: 30px;height: 100px;float: left;margin:15px;border-radius: 15px;animation: loding 1s ease infinite alternate;}.con div:nth-child(1){background-color: red;}.con div:nth-child(2){background-color: green;animation-delay: 100ms;}.con div:nth-child(3){background-color: pink;animation-delay: 200ms;}.con div:nth-child(4){background-color: rgb(174,255,43);animation-delay: 300ms;}.con div:nth-child(5){background-color: rgb(0,255,255);animation-delay: 400ms;}.con p {text-align: center;}</style>
</head>
<body><div class="con"><div></div><div></div><div></div><div></div><div></div><p>loding...</p></div>
</body>
</html>

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

动画中使用的图片如下：

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

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

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

下面实现来看看，如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>@keyframes walking{from{left: 0px;}to{left: -960px;}}.step{width: 120px;height: 180px;border:1px solid #000;position: relative;overflow: hidden;}.step img{position: absolute;top: 0px;left: 0px;animation: walking 1s steps(8) infinite;}</style>
</head>
<body><div class="step"><img src="steps.png" alt=""></div>
</body>
</html>

2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送

寻找资源的地址如下：

扫描微信公众号

寻找价值数万的视频资源