애니메이션 용 SASS 믹스 생성

Question

즉석에서 백분율을 조정할 수있는 믹스 인을 만들고 싶습니다. 나는 조금 넘어졌고, 약간의 포인터를 좋아할 것이다. 여기

내가 달성하고자하는 것입니다 :

@keyframes slide-1 { 
    0% {transform: translate3d(0, 0, 0);} 
    50% { } 
    100% {transform: translate3d(-100%, 0, 0);} 
} 

@keyframes slide-2 { 
    0% {transform: translate3d(0, 0, 0);} 
    50% { } 
    100% {transform: translate3d(-200%, 0, 0);} 
} 

믹스 인이 비율의 인수를 것

- 나는 애니메이션 이름을 겠지? 당신은이 호출 된 직전 .sass 파일의 맨 위에 어딘가에 믹스 인을 추가 할 수 있습니다

@keyframes $animation-name { 
    0% {transform: translate3d(0, 0, 0);} 
    50% { } 
    100% {transform: translate3d($percentage, 0, 0);} 
} 

Answer 1

:처럼 뭔가. 또는 외부 파일에서 포함시킬 수도 있습니다.

@mixin animation-mixin($name, $from, $to) { 
    @keyframes #{$name} { 
    0% {transform: translate3d($from, 0, 0); opacity: 0;} 
    100% {transform: translate3d($to, 0, 0); opacity: 1;} 
    } 
} 

를 호출 믹스 인 및 다음 3 개 값을 전달 $name,이 같은 $from, $to :

@include animation-mixin(slide-1, 0, 100%); 
@include animation-mixin(slide-2, 0, 200%); 

그리고이로 번역 될 것이다 :

@keyframes slide-1 { 
    0% { 
    transform: translate3d(0, 0, 0); 
    opacity: 0; 
    } 
    100% { 
    transform: translate3d(100%, 0, 0); 
    opacity: 1; 
    } 
} 
@keyframes slide-2 { 
    0% { 
    transform: translate3d(0, 0, 0); 
    opacity: 0; 
    } 
    100% { 
    transform: translate3d(200%, 0, 0); 
    opacity: 1; 
    } 
} 

---

DEMO

HTML

<div class="box-1"></div> 
<div class="box-2"></div> 

SASS

.box-1, 
.box-2 { 
    height: 20px; 
    width: 20px; 
    margin: 5px; 
} 
.box-1 { 
    background-color: blue; 
    animation: slide-1 2s ease infinite; 
} 
.box-2 { 
    background-color: red; 
    animation: slide-2 2s ease infinite; 
} 

@mixin animation-mixin($name, $from, $to) { 
    @keyframes #{$name} { 
    0% {transform: translate3d($from, 0, 0); opacity: 0;} 
    100% {transform: translate3d($to, 0, 0); opacity: 1;} 
    } 
} 

@include animation-mixin(slide-1, 0, 100%); 
@include animation-mixin(slide-2, 0, 200%);