sass中@keyframes、animation的使用

最新推荐文章于 2024-07-17 04:46:08 发布

k12861

最新推荐文章于 2024-07-17 04:46:08 发布

阅读量8.1k

点赞数 1

文章标签： sass

本文链接：https://blog.csdn.net/k12861/article/details/52447849

版权

@mixin animation($val) {
	animation:$val;
	-webkit-animation:$val;
	-moz-animation:$val;
	-ms-animation:$val;
}

@mixin keyframes($name,$obj) {
	@keyframes #{$name} {
		@each $i,$val in $obj {
			#{$i} {
				@each $v1,$val2 in $val {
					#{$v1}:$val2;
				}
			}
		}
	}

	@-moz-keyframes #{$name} {
		@each $i,$val in $obj {
			#{$i} {
				@each $v1,$val2 in $val {
					#{$v1}:$val2;
				}
			}
		}
	}

	@-webkit-keyframes #{$name} {
		@each $i,$val in $obj {
			#{$i} {
				@each $v1,$val2 in $val {
					#{$v1}:$val2;
				}
			}
		}
	}

	@-ms-keyframes #{$name} {
		@each $i,$val in $obj {
			#{$i} {
				@each $v1,$val2 in $val {
					#{$v1}:$val2;
				}
			}
		}
	}

}


div {
	$an1:(width:20px,height:20px);
	$an2:(width:100px,height:100px);
	$demo:( 0%:$an1, 50%:$an2, 100%:$an2 );
	@include keyframes(demo,$demo);
	@include animation(demo 2s);
}