2017-12-24 1 views
0

Sass 구문에서도 가능하다면이 아이디어가 효과를 내기 위해 약간의 문제가 있습니다. 나는 SCSS 문법에서 사용되는 비슷한 것들을 보았고 여러 가지를 시도해 보았다. 그들 모두는 지금 실패했다. @keyframes의 Sass 구문과 관련된 문제

코드, 당신은 그 뒤에 아이디어는 코드에서 무엇을 볼 수

@keyframes AdHop($from, $to) 
 
    0% 
 
    transform: scale($from) 
 
    100% 
 
    transform: scale($to)

그래서 내 질문은, 그렇다면 어떻게 할 수 있습니까?

+0

당신은 많은 애니메이션,'$의 from''당신이 값 to' $의 많은 쌍을 생성 할 필요가 믹스 인을 만들 수 있습니다. 따라서 한 요소가 0에서 100 %까지 움직이고 다른 요소가 -100 %에서 0으로 애니메이션되면 두 개의'@keyframes' 선언이 필요합니다. – 3rdthemagical

+0

DRY 방법이 있었으면 좋겠다./그래, thanks @ 3rdthemagical – Wake

답변

0

당신은

DEMO

@mixin adHop($from, $to, $name) { 
    @keyframes #{$name} { 
    0% { transform: scale($from); } 
    100% { transform: scale($to); } 
    } 
} 

@include adHop(1, 2, cool); 
button:hover { animation: cool 1s; }