HTML5开发系列之 Animation

最新推荐文章于 2024-04-08 08:59:02 发布

启之灵

最新推荐文章于 2024-04-08 08:59:02 发布

阅读量684

点赞数

分类专栏： Html 5

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82824451

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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>