前端中animation控制动画定位到动画结束，并使用js控制3s消失

最新推荐文章于 2023-12-05 18:07:07 发布

F0ever

最新推荐文章于 2023-12-05 18:07:07 发布

阅读量2.5k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/lingluofengzang/article/details/89620822

版权

本文介绍了如何在前端中让动画在结束时停留在结束位置，并使用JavaScript控制元素在3秒后消失。通过设置CSS动画及JS操作DOM实现这一功能，详细讲解了两种不同的JS执行方式。

摘要由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html>
<head>
	<title>home</title>
	<meta charset="utf-8">
	<style type="text/css">
		.fix_tip{
			width: 500px;
			height: 48px;
			left: 50%;
			margin-left: -250px;
			font-size: 24px;
			line-height: 48px;
			position: fixed;
			background: red;
			color: white;
			text-align: center;
			z-index: 1;
			border: 1px solid red;
			animation:myfirst 3s forwards;
			-moz-animation:myfirst 3s forwards; /* Firefox */
			-webkit-animation:myfirst 3s forwards; /* Safari and Chrome */
			-o-animation:myfirst 3s forwards; /* Opera */
		}
		@keyframes myfirst{
			from{top:0px}
			to{top:100px}
		}
		/* Firefox */
		@-moz-keyframes myfirst {
			from{top:0px}
			to{top:100px}
		}
		/* Safari and Chrome */
		@-webkit-keyframes myfirst {
			from{top:0px}
			to{top:100px}
		}
		 /* Opera */
		@-o-keyframes myfirst{
			from{top:0px}
			to{top:100px}
		}
	</style>
&