动画效果
语法： 创建动画：@keyframes 调用动画：animation
animation参数值
|---------------------------|--------------------------------------------|
| 参数值 | 效果 |
| animation-name | 规定 @keyframes动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease" |
| animation-delay | 规定动画何时开始。默认是 0 |
| animation-iteration-count | 规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次） |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" ，'alternate' |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running",'paused' |
| animation-fill-mode | 规定对象动画时间之外的状态.forwards,backwards默认值 |
1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。
2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。
3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。
4、为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画
案例
案例一：元素平移加颜色渐变
css
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
animation: dong 2s linear;
}
@keyframes dong{
0%{
background-color: aquamarine;
margin-left: 0;
}
100%{
background-color: blueviolet;
margin-left: 300px;
}
}
</style>
<div class='box'>hello world</div>
案例二：将元素移动到某个位置，并且停在当前位置
css
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
animation: dong 2s linear;
/* 动画执行完毕，停止在最后一个动画的效果 */
animation-fill-mode: forwards;
}
@keyframes dong{
0%{
background-color: aquamarine;
margin-left: 0;
}
100%{
background-color: blueviolet;
margin-left: 300px;
}
}
</style>
<div class='box'>hello world</div>案例三：元素沿着正方形轨迹移动
css
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
animation: dong 2s linear;
/* 动画执行完毕，停止在最后一个动画的效果 */
animation-fill-mode: forwards;
}
@keyframes dong{
/* 可以省略0%和100%的效果 */
0%{
transform: translate(0,0);
}
25%{
transform: translate(300px,0);
}
50%{
transform: translate(300px,300px);
}
75%{
transform: translate(0,300px);
}
}
</style>
<div class='box'>hello world</div>案例四：西游记效果
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.content{
width: 100%;
height: 100%;
background: url('./imgs/10.jpg');
animation: dong 20s linear infinite;
position: relative;
}
/*背景移动效果 */
@keyframes dong{
0%{
background-position: 0 0;
}
100%{
background-position: 2000px 0;
}
}
.wk{
width:200px;
height: 200px;
position: absolute;
top: 45%;
left: 20%;
background: url('./imgs/1.png') no-repeat 0 0;
animation: wk 2s steps(8,end) infinite;
}
/*悟空移动效果 */
@keyframes wk{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
.bj{
width:200px;
height: 200px;
position: absolute;
top: 45%;
left: 35%;
background: url('./imgs/2.png') no-repeat 0 0;
animation: bj 2s steps(8,end) infinite;
}
/*八戒移动效果 */
@keyframes bj{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
</style>
</head>
<body>
<div class="content">
<div class="wk"></div>
<div class="bj"></div>
</div>
</body>
</html>steps 有两个参数 第一个表示分几步执行完 第二个有两个值 start 第一帧是第一步动画结束 end 第一帧是第一步动画开始
案例五：风车效果
css
<style>
div{
width: 1000px;
height: 500px;
background-image: url(caodi.png);
background-size: 1000px 500px
margin: 100px auto;
position: relative;
}
img:nth-child(1){
width: 350px;
height: 350px;
position: absolute;
left: 115px;
top: 60px;
}
/*设置第二个风车*/
img:nth-child(2){
width: 150px;
height: 150px;
position: absolute;
top: 285px;
left: 440px;
}
/*设置第三个风车*/
img:nth-child(3){
width: 250px;
height: 250px;
position: absolute;
top: 190px;
left: 578px;
}
/*key:关键，键；frame：框架；关键帧动画*/
@keyframes dongHua {
0%{
transform: rotate(0deg);
}100%{
transform: rotate(360deg);
}
}
img{
/*动画 合写*/
animation: dongHua 1s infinite linear;
}
</style>
<div>
<img src="fengche.png" alt="这是一张图片：风车">
<img src="fengche.png" alt="这是第二个风车">
<img src="fengche.png" alt="这是第三个风车">
</div>