1.animation-fill-mode属性简介:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: deeppink;
animation-name: anim1;
animation-duration: 3s;
animation-delay: 2s;
/*在动画未播放时,显示动画第一帧*/
animation-fill-mode: backwards;
/*在动画播放完,显示动画最后一帧*/
animation-fill-mode: forwards;
/*向前和向后填充模式都被应用。*/
animation-fill-mode: both;
}
@keyframes anim1 {
0%{
background-color: red;
}
50%{
background-color: blue;
}
100%{
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
2.animation-play-state 属性简介:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
/*background-color: orange;*/
animation-name: anim2;
/*animation-delay: 1s;*/
animation-duration: 3s;
animation-fill-mode: both;
/*控制动画的次数*/
animation-iteration-count: 2;
/*控制动画的次数 infinite --- 无限次的播放 */
animation-iteration-count: infinite;
}
/*当鼠标悬浮在.box时,暂停播放动画*/
.box:hover {
animation-play-state: paused;
}
@keyframes anim2 {
10%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
80%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
3,播放顺序设置:animation-direction :reverse,alternate, 播放次数:animation-iteration-count:infinite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
/*background-color: orange;*/
animation-name: anim2;
/*animation-delay: 1s;*/
animation-duration: 3s;
animation-fill-mode: both;
/*控制动画的次数*/
animation-iteration-count: 2;
/*控制动画的次数 infinite --- 无限次的播放 */
/*animation-iteration-count: infinite;*/
/*控制每一帧的播放顺序 reverse - 反向播放*/
animation-direction: reverse;
/*控制每一帧的播放顺序 alternate - 交替反复播放,必须配合播放次数使用,播放次数大于1*/
animation-direction: alternate;
}
/*当鼠标悬浮在.box时,暂停播放动画*/
.box:hover {
animation-play-state: paused;
}
@keyframes anim2 {
10%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
80%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
4,综合使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;
animation-name: anim2;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: both;
/*animation-fill-mode: backwards;*/
/*控制动画的次数*/
/*animation-iteration-count: 2;*/
/*控制动画的次数 infinite --- 无限次的播放 */
animation-iteration-count: infinite;
/*控制每一帧的播放顺序 reverse - 反向播放*/
animation-direction: reverse;
/*如果反向播放,第一帧是 100%{}, 最后一帧 0%{}*/
}
/*当鼠标悬浮在.box时,暂停播放动画*/
.box:hover {
animation-play-state: paused;
}
@keyframes anim2 {
0%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
100%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>