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>
相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js