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>
相关推荐
永乐春秋31 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿32 分钟前
【前端】CSS
前端·css
ggdpzhk34 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue