定義動畫的格式:
@keyframes 動畫名稱{
階段1{css樣式}
階段2{css樣式}
階段3{css樣式}
}
每個階段用百分比表示,即從0%到100%
起止必須設定即0%和100%,或者from和to
下列代碼中的圖檔plane在螢幕中,呈W型運動
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
img{
width: 150px;
-webkit-animation: plane 5s ease-in-out 1s;
-o-animation: plane 15s ease-in-out 1s;
animation: plane 5s ease-in-out 1s;
}
@keyframes plane { /*plane:動畫名稱*/
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(100px,200px);
}
50%{
transform: translate(200px,00px);
}
75%{
transform: translate(300px,200px);
}
100%{
transform: translate(400px,00px);
}
}
</style>
<title>動畫</title>
</head>
<body>
<img src="../../img/plane.jpg" alt="">
</body>
</html>