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>
