迟疑的节奏

导航

体会动画 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>体会动画</title>
	<style type="text/css">
         div {
         	width: 100px;
         	height: 100px;
         	background-color: pink;
         	position: absolute;
         	left: 0;
         	/*调用动画*/
         	/*animation：动画名称  花费时间  运动曲线 何时开始 播放次数   是否反向*/
         	animation: move 2s ease 0s infinite alternate;

         }
         /*声明动画*/
         @keyframes move{
         	from{
                 left: 0;
                 background-color: pink;
         	}
         	to{
                 left: 1000px;
                 background-color: yellow;
         	}
         }


	</style>
</head>
<body>
	<div></div>
</body>
</html>

　　

posted on 2020-02-20 21:07  迟疑的节奏  阅读(122)  评论(0)    收藏  举报