css连续动画（动画组）

雾里桃花

已于 2025-03-12 13:54:35 修改

阅读量1.1k

点赞数 12

文章标签： css 前端

于 2024-06-11 18:06:56 首次发布

本文链接：https://blog.csdn.net/csdn_chengpeng/article/details/139605592

版权

css动画组

- 1.效果图
- 2.源码

1.效果图

在这里插入图片描述

2.源码

以下为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>