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、大数据视频，价值数万资源大放送
寻找资源的地址如下：
扫描微信公众号
寻找价值数万的视频资源
