CSS动画

最新推荐文章于 2024-05-23 22:54:35 发布

qq_37175053

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量136

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37175053/article/details/104270973

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS动画-animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。
使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应始终定义 0% 和 100% 选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1. 创建动画 */
    	@keyframes myanimation1 {
			
			from { background-color: green; }
			to { background-color: red; }

    	}
    	/* 2. 使用 animation 绑定动画  */
    	div.div1 {
    		width: 400px;
    		height: 400px;
    		background-color: yellow;
    		animation: myanimation1 2S;
    	}
		@keyframes mymove
		{
			from { left: 0px; }
			to { left: 200px; }
			/* 等价于 */
/* 			0% { left: 0px; }
			100% { left: 200px; } */
		}
		div.div2 {
    		width: 400px;
    		height: 400px;
    		position:relative;
    		background-color: green;
    		animation: mymove 2S infinite;
    	}
	</style>
</head>
<body>
	<div class="div1"></div>
	<hr>
	<div class="div2"></div>
</body>
</html>