版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82824451
Animation
html5中的动画通常是和transform搭配使用的；
transform设定执行的数据；animation实现过渡动画效果；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 200px;
animation-name: car;
animation-duration: 3000ms;
animation-iteration-count: infinite;
}
@keyframes car{
/*from{
transform: translate3d(0,0,0);
}
to{
transform: translate3d(1000px,0,0);
}*/
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(1000px,0,0);
}
51%{
transform: translate3d(1000px,0,0) rotateY(180deg);
}
100%{
transform: translate3d(0,0,0) rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="img/car.png" />
</body>
</html>