css连续动画(动画组)

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 230px;
				height: 130px;
				background-color: #D8B7B2;
				border: 1px solid #840705;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				padding: 5px;
			}
			
			.box.ani {
				animation: backOutRight 2s;
			}
			
			.box.ani2 {
				animation: backOutRight2 2s;
			}
			
			@-webkit-keyframes backOutRight {
				0% {
					-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
				    transform: translate3d(100%, 0, 0) skewX(-30deg);
				    opacity: 0;
				}
			
				60% {
					-webkit-transform: skewX(20deg);
					transform: skewX(20deg);
					opacity: 1;
				}
				
				80% {
				    -webkit-transform: skewX(-5deg);
				    transform: skewX(-5deg);
				    opacity: 1;
				}
				100% {
				    -webkit-transform: none;
				    transform: none;
				    opacity: 1;
				}
			}
			
			@-webkit-keyframes backOutRight2 {
				0% {
					transform: rotate(0deg);
				   
				}
			
			
				100% {
				 transform: rotate(180deg);
				}
			}
		</style>
	</head>
	<body>
		<div id='box' class='box'></div>
	</body>
	<script>
		let dom = document.getElementById('box')
		let timer = null;
		let currentIndex = 0;
		let aniList = [
			{
				num:2, //单个动画执行次数
				time:1000, //单个动画执行时间
				name: 'ani', //动画名称
			},
			{
				num:1,
				time:2000,
				name: 'ani2'
			},
			{
				num:1,
				time:2000,
				name: 'ani'
			},
			{
				num:2,
				time:1000,
				name: 'ani2'
			},
		]
	
		startAni()
		function startAni() {
			// 初始化dom节点的class
			let classList = ['box']
			dom.setAttribute('class', classList.join(' '))
			
			// 如果当前播放的动画已经是最后一个,阻止后续代码执行
			if(!aniList[currentIndex]) {
				return
			};
			
			// 获取当前需要播放的动画
			let item = aniList[currentIndex];
			// 设置当前动画执行时间
			dom.style.animationDuration = item.time / 1000 +'s'; 
			
			// 将动画的下标加1
			currentIndex++;
			
			// 默认执行一次
			aniGo(item)
			
			// 根据动画执行时间设置计时器
			timer = setInterval(() => {
				aniGo(item)
			},item.time)
			
			
			
			function aniGo(item) {
				if(item.num == 0) {
					clearInterval(timer)
					startAni()
					return;
				}
				classList =  ['box']
				dom.setAttribute('class', classList.join(' '))
				let timer3 = setTimeout(() => {
					classList =  ['box',item.name]
					dom.setAttribute('class', classList.join(' '))
					item.num--;
					clearTimeout(timer3)
				},20)
			}
		}
		
	</script>
</html>
相关推荐
然我18 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子23 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹26 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器33 分钟前
指定阿里镜像原理
前端
枷锁—sha37 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha39 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss