CSS结合序列帧实现动效

想要实现空调出风效果，但是只有从左到右出风的序列帧图片，需要通过animation实现正序倒序循环播放，需要使用scss语法。

代码如下：

// 定义一个放置动效的容器
<div className='animation'></div>

// scss
	$imgCount: 35;	//图片数量减1
	.animation {
		position: absolute;
		animation-name: animation;
		animation-duration: 2s;
		animation-timing-function: linear;
		// animation-delay: 0, 2s;
		animation-iteration-count: infinite; //无线循环播放
		animation-fill-mode: forwards;
		animation-direction: alternate;  //奇数次正序播放、偶数次倒序播放；如果给出了完整的从左到右从右到左序列帧，则不需要设置此参数
		width: 352px;
		height: 200px;
		background-position: center center;
    	background-repeat: no-repeat;
    	background-size: contain;
	}

	@keyframes animation {
		@for $i from 0 through $imgCount {
			#{($i * 100%/$imgCount)} {
				background-image:url(../imgs/guangjiao_zidong_gaosu/G-Z-G#{$i}.png); //图片路径
			}
		}
	}

这样就可以实现从左到右，从右到左循环出风效果。

拓展：
想要实现两个动画顺序循环播放，需要将第二个动画的animation-delay设置为第一个动画的animation-duration，即将第二个动画的延时时间设置为第一个动画的持续时间。

参考代码如下：

// 定义一个放置动效的容器
<div className='animation'></div>

// scss
	$imgCount: 35;
		.animation {
			position: absolute;
			animation-name: animation1, animation2;
			animation-duration: 2s, 2s;
			animation-timing-function: linear, linear;
			animation-delay: 0, 2s;
			animation-iteration-count: 1, infinite;
			animation-fill-mode: forwards, forwards;
			animation-direction: normal, alternate;
			width: 350px;
			height: 200px;
			background-position: center center;
    		background-repeat: no-repeat;
    		background-size: contain;
		}

		@keyframes animation1 {
			@for $i from 0 through $imgCount {
				#{($i* 100%/$imgCount)} {
					background-image: url(../imgs/guangjiao_zidong_gaosu/G-Z-G#{$i}.png);
				}
			}
		}
		@keyframes animation2 {
			@for $i from $imgCount through 0 {
				#{((35 -$i) * 100%/$imgCount)} {
					background-image: url(../imgs/guangjiao_zidong_gaosu/G-Z-G#{$i}.png);
				}
			}
		}

参考链接：
animation中各参数介绍