設置動畫的屬性：animation
animation-name: ; 動畫的名字
animation-duration: ;動畫的時間
animation-timing-function: ;動畫變化的速度默認是easy,linear,ease-in,ease-out, 也可以設置貝塞爾曲線
animation-iteration-count: 3;設置動畫執行幾次 infinite無限次
animation-direction: alternate;s設置往返運動，奇數正常，偶數回來，reverse直接反方向運動
alternate-reverse 奇數回來，偶數反方向
animation-fill-mode: forwards;是動畫保留最後一針的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1{
width: 200px;
height: 200px;
background-color: aqua;
/* 動畫
animation-name: ; 動畫的名字
animation-duration: ;動畫的時間
animation-timing-function: ;動畫變化的速度默認是easy,linear,ease-in,ease-out,
也可以設置貝塞爾曲線
animation-iteration-count: 3;設置動畫執行幾次 infinite無限次
animation-direction: alternate;s設置往返運動，奇數正常，偶數回來
reverse直接反方向運動
alternate-reverse 奇數回來，偶數反方向
animation-fill-mode: forwards;是動畫保留最後一針的效果
*/
animation:donghua1 3s ;
animation-timing-function: cubic-bezier(0.6, 0.1, 1, 1.39) ;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes donghua1{
/* from等同於百分之0*/
0%{transform: translate(0,0);}
33.3%{transform: translate(500px,0);}
60%{transform: translate(200px,100px);}
/* to相當於百分之百 */
100%{transform: translate(500px,300px);}
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>