forwards 以及backwards.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1,.box2,.box3,.box4{
width: 100px;
height: 100px;
background-color: #000;
text-align: center;
color: yellow;
line-height: 100px;
}
.box1{
-webkit-animation:move1 2s 1s 1 alternate linear none;
}
.box2{
-webkit-animation:move1 2s 1s 1 normal linear forwards;
}
.box3{
-webkit-animation:move1 2s 1s 1 alternate linear backwards;
}
.box4{
-webkit-animation:move1 2s 1s 1 alternate linear both;
}
@-webkit-keyframes move1{
0%{margin-left: 100px;}
100%{margin-left: 300px;}
}
</style>
</head>
<body>
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见
none :在应用动画时,在经过延时时间后执行动画之前及动画结束后，使元素呈现默认状态
<div class="box1">none</div>
forwards:表示动画结束后,元素就是当前动画结束时候的状态。
<div class="box2">forwards</div>
backwards:表示动画开始之前,元素处于keyframe是"from"或"0%"关键帧的状态。
<div class="box3">backwards</div>
both:forwards + backwards
<div class="box4">both</div>
</body>
</html>
