scss sass_keyframe-animation.scss

Posted 2021-05-18

@mixin keyframes($animation-name) {
	@-webkit-keyframes $animation-name {
		@content;
	}
	@-moz-keyframes $animation-name {
		@content;
	}
	@-ms-keyframes $animation-name {
		@content;
	}
	@-o-keyframes $animation-name {
		@content;
	}
	@keyframes $animation-name {
		@content;
	}
}

@mixin animation($str) {
	-webkit-animation: #{$str};
	-moz-animation: #{$str};
	-ms-animation: #{$str};
	-o-animation: #{$str};
	animation: #{$str};      
}


//Usage
@include keyframes(slide-down) {
	0% { opacity: 1; }
	90% { opacity: 0; }
}

.element {
	width: 100px;
	height: 100px;
	background: black;
	@include animation('slide-down 5s 3');
}