css3动画的"消失"””

最新推荐文章于 2025-05-30 21:35:39 发布

蒲小若

最新推荐文章于 2025-05-30 21:35:39 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39585562/article/details/77017881

本文记录了一个关于CSS3动画的小陷阱：作者在实现一个简单的元素变形动画时，遇到了动画结束后元素背景消失的问题。通过逐步排查，最终发现是由于动画结束时背景颜色设置为透明导致的视觉误解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做了一件特别丢人的事情，用css3写一个最基础最简单的动画

元素从左上角开始，到200px 处转换成圆形到400px处转换成方形

第一次写的时候，我的代码是这样写的：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			position: absolute;
			width: 100px;
			height: 100px;
			top: 0;
			animation:mobbile 3s;
		}

		@keyframes mobbile{
			0%{
				left: 0;
				background-color: #FFA300;	
			}
			50%{
				left: 200px;
				border-radius: 50%;
				background-color: #0f0;
			}
			100%{
				left: 400px;
				background-color: #00f;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

结果是每当这个动画执行结束之后，这个div就会“消失”，然后我就反复的检查我的代码，看一下是不是哪儿搞错了，结果是看了一遍又一遍都没有问题啊，那这是咋回事啊，没办法，于是我就在这个div里加了文本，结果发现当动画执行结束之后，这个div并没有消失，只是没有了背景色了而已，然后再回去看自己的代码，只想说一句，哎呀我去！自己把自己给坑住了，所以在以后写东西的时候，即使再简单，再基础，也要细心一点，认真一点。

下面是我改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			position: absolute;
			width: 100px;
			height: 100px;
			top: 0;
			animation:mobbile 3s;
		}

		@keyframes mobbile{
			0%{
				left: 0;
				background-color: #FFA300;	
			}
			50%{
				left: 200px;
				border-radius: 50%;
				background-color: #0f0;
			}
			100%{
				left: 400px;
				background-color: #00f;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>