<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>关键帧动画</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
width: 200px;
height: 200px;
background-color: red;
/*1、设置动画名称*/
animation-name: changeColor;
/*2、设置动画时间 秒s，毫秒ms*/
animation-duration: 3s;
/*3、动画次数 iteration重复 infinite无限的 */
animation-iteration-count:3;
/*4、动画方向*/
animation-direction: reverse;
/*5、动画延时*/
animation-delay: 1s;
/*6、动画控制，暂停或继续动画*/
animation-play-state: running;
/*7、动画的运行速率 常用*/
animation-timing-function: linear;
}
.one:hover{
animation-play-state: running;
}
.two{
width: 300px;
height: 400px;
background-color: orange;
animation: changeTwo 1s 0.5s 2 linear ;
/*8、动画完成时的模式
backwards 默认值 动画完成后会回到默认值
forwards 动画完成后 定格在动画完成后最后的属性值*/
animation-fill-mode: forwards;
}
.three{
margin: 0 auto;
width:500px;
height: 600px;
background-color: yellow;
animation-name: changeThree;
animation-timing-function: linear;
animation-delay: 4s;
animation-fill-mode: forwards;
animation-duration: 2s;
animation-play-state: running;
animation-iteration-count:3;
}
@keyframes changeColor{
0%{
background-color: red;
width:200px;
}
20%{
background-color: green;
width: 400px;
}
40%{
background-color: greenyellow;
width: 600px;
}
60%{
background-color: goldenrod;
width: 400px;
}
80%{
background-color: orange;
width: 300px;
}
100%{
background-color: red;
width: 200px;
}
}
@keyframes changeTwo{
from{
width: 300px;
background-color: orange;
}
to{
width: 500px;
background-color: red;
}
}
@keyframes changeThree{
0%{
width: 500px;
}
20%{
width: 400px;
}
40%{
width: 300px;
}
60%{
width: 200px;
}
80%{
width: 400px;
}
100%{
width: 500px;
}
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
网友评论