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

最新推荐文章于 2022-08-11 17:10:12 发布

F0ever

最新推荐文章于 2022-08-11 17:10:12 发布

阅读量2.4k

点赞数 1

分类专栏： web

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

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码

<!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>
</head>
<body>
	<div class="fix_tip" id="fix_tip">
		<!-- <b>数据格式错误，插入失败</b> -->
	</div>
	<!-- /错误提示 -->
	<script type="text/javascript">
		setTimeout("document.getElementById('fix_tip').style.display='none'",6000);
	</script>
</body>
</html>

动画结束后停止在结束位置

网上搜到的都是设置
```
animation-fill-mode: forwards;
```
但是事实上单独这样设置是没有效果的，正确写法是
```
animation:myfirst 3s forwards;
```
div在3s后消失
1. 获取控制的div
  document.getElementById('fix_tip')
2. 设置消失
  这里是设置该div为none
  setTimeout("document.getElementById('fix_tip').style.display='none'",6000);
  我这里设置6s消失是因为我的h5动画需要执行3s。
3. js运行说明
  一种是写成function，在body中调用；
  另一种就是我在上面所显示的，直接在body结束标签之上，body中其他内容填充完毕，再写js方法。

F0ever

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端中animation控制动画定位到动画结束，并使用js控制3s消失

代码<!DOCTYPE html><html><head> <title>home</title> <meta charset="utf-8"> <style type="text/css"> .fix_tip{ width: 500px; height: 48px; left...
复制链接

扫一扫