HTML5开发系列之 Animation

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

原创最新推荐文章于 2024-04-08 08:59:02 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

Html 5 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍如何使用HTML5的transform和animation属性创建复杂的动画效果。通过实例展示了一个汽车图片在网页上移动并旋转180度的过程，具体包括设置动画名称、持续时间和迭代次数，以及使用关键帧定义动画路径。

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>