scss keyframe 적용법

일반적인 방법으로는 scss에 @keyframe을 적용할 수 없었다.

 

 

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  animation: #{$str};
}
@include keyframes(fade) {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

위와같이 mixin과  include를 활용해서 넣어주어야 한다.

 

위 예시는 fade를 적용시켜본 경우이다.

 

그 이후,

 

class-name {
	@include animation("fade 5s infinite")
}

다음과 같이 넣으면 keyframe을 적용시킬 수 있다.