设置动画的属性：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>