<!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 規(guī)定動(dòng)畫在播放之前或之后材蹬，其動(dòng)畫效果是否可見
none :在應(yīng)用動(dòng)畫時(shí),在經(jīng)過延時(shí)時(shí)間后執(zhí)行動(dòng)畫之前及動(dòng)畫結(jié)束后口锭，使元素呈現(xiàn)默認(rèn)狀態(tài)
<div class="box1">none</div>
forwards:表示動(dòng)畫結(jié)束后,元素就是當(dāng)前動(dòng)畫結(jié)束時(shí)候的狀態(tài)舟陆。
<div class="box2">forwards</div>
backwards:表示動(dòng)畫開始之前,元素處于keyframe是"from"或"0%"關(guān)鍵幀的狀態(tài)捷沸。
<div class="box3">backwards</div>
both:forwards + backwards
<div class="box4">both</div>
</body>
</html>
