CSS 키 프레임 애니메이션에서`animation-direction : reverse`가 작동하지 않는 이유는 무엇입니까?

Question

animation-direction: reverse을 사용하여 CSS 키 프레임 애니메이션을 리팩터링하려고합니다. 컨테이너 div를 클릭하면 애니메이션을 트리거하는 jQuery ("활성"상태에 따라 앞으로 또는 뒤로)를 통해 "활성"클래스를 토글합니다. 앞으로 및 뒤로 애니메이션은 키 프레임이 반대 순서 인 경우를 제외하고는 똑같습니다. animation-direction: reverse은 하나의 애니메이션을 사용하고 다른 애니메이션을 리버스하여 리펙토링 할 수 있다고 생각했지만 실제로는 그렇게 생각하지 않았습니다.

링크 (animation-direction: reverse를 사용하지 않고) codepen합니다 : https://codepen.io/soultrust/pen/gogKjN

다음 마크 업 및 CSS (말대꾸) 코드는 반대하지 않고 지금 작동하는 방식이다.

$width-height: 100px; 
$duration: 1s; 
$line-width: 10%; 
$animation-distance: $width-height * .45; 

@keyframes line-in { 
    0% { transform: translateY(-$animation-distance); } 
    50% { transform: translateY(0); } 
    100% { transform: rotate(-135deg); } 
} 

@keyframes line-out { 
    0% { transform: rotate(-135deg); } 
    50% { transform: translateY(0); } 
    100% { transform: translateY(-$animation-distance); } 
} 

.container { 
    margin: 10rem auto 0; 
    width: $width-height; 
    height: $width-height; 
    position: relative; 
    border: 1px solid black; 

    &.active { 
    .line { 
     animation-name: line-in; 
     animation-direction: normal; 
    } 
    } 
} 

.line { 
    width: 100%; 
    height: $line-width; 
    position: absolute; 
    top: 45%; 
    background-color: orange; 
    animation-direction: normal; 
    animation-name: line-out; 
    animation-duration: $duration; 
    animation-fill-mode: forwards; 
} 

I는 다음으로 "활성"애니메이션 변경

 

<div class="container"> 
    <div class="line"></div> 
</div> 

는 양방향 작동을 중지 애니메이션.

&.active { 
    .line { 
    animation-name: line-out; 
    animation-direction: reverse; 
    } 
} 

나는 그것이 내가 그냥 animation-direction: reverse을 설정하고 animation-name: line-in를 사용하는 경우 때문에 같은 애니메이션을 사용하여 함께 할 수있는 뭔가가 생각, 그것은 정확하게 라인에서 역으로 애니메이션을 재생합니다.

Answer 1

아주 좋은 질문입니다. 이미 animation-direction: reverse;이 작동하는 것으로 나타났습니다. 너 어디서나이 css quirkiness를 알아내는 데 아주 가깝다.

메모를 남기려면 몇 가지 추가 규칙이 있습니다. 제거 할 때

• 가/CSS 애니메이션을 교체, 애니메이션 (실제 애니메이션을 변경하지 않는 동안)
• 당신이 reverse을 설정
이 애니메이션은 있었다 어떤 %에서 계속 0 %에서 시작됩니다. 당신이 요소를 클릭하고 line-out 애니메이션을 설정할 때

그래서 :

• 애니메이션은 당신이 설정 한 어떤 방향으로 0 %에서
• 재생을 시작합니다.

만 새로운 애니메이션 방향을 적용 할 때 :

• 그것이 어떤 비율, 예를 들어, 100 %에서 애니메이션의 연속.

restart 여러 가지 속임수로 애니메이션을 재생할 수 있습니다. 요소가 재생성 될 때 애니메이션이 반대로 재생된다는 것을 알 수 있습니다. 위해

var clickFunc =function(e) {  
 
     //toggle the state 
 
     $(this).toggleClass("active"); 
 
     //reset the animatino state by cloning and replacing the element. 
 
     var newone = this.cloneNode(true); 
 
     this.parentNode.replaceChild(newone, this); 
 
     // reapply click handler to the cloned element 
 
     $(newone).click(clickFunc) 
 
} 
 

 

 
$(function() { 
 
    $(".question").click(function() { 
 
    $(this).toggleClass("active"); 
 
    }); 
 
    
 
    $(".answer").click(clickFunc); 
 

 
    $(".restart").click(function() { 
 
    $(".line").each(function() { 
 
     var newone = this.cloneNode(true); 
 
     this.parentNode.replaceChild(newone, this); 
 
    }); 
 
    }); 
 
});

@keyframes line-in { 
 
    0% { 
 
    transform: translateY(-45px); 
 
    } 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: rotate(-135deg); 
 
    } 
 
} 
 
@keyframes line-out { 
 
    0% { 
 
    transform: rotate(-135deg); 
 
    } 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: translateY(-45px); 
 
    } 
 
} 
 
.line { 
 
    width: 100%; 
 
    height: 10%; 
 
    position: absolute; 
 
    top: 45%; 
 
    background-color: orange; 
 
    animation-direction: normal; 
 
    animation-name: line-in; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.container { 
 
    margin: 1rem auto 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 
.container.reverse .line { 
 
    animation-name: line-in; 
 
    animation-direction: reverse; 
 
} 
 
.container.active .line { 
 
    animation-name: line-in; 
 
    animation-direction: reverse; 
 
} 
 
.container.active.reverse .line { 
 
    animation-name:line-in; 
 
    animation-direction: normal; 
 
} 
 

 
.container.out.active .line { 
 
    animation-name: line-out; 
 
    animation-direction: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="restart">reset animation state</button><br> 
 
in -out 
 
<div class="container question out"> 
 
    <div class="line"></div> 
 
</div> 
 

 
active reversed 
 
<div class="container question"> 
 
    <div class="line"></div> 
 
</div> 
 

 
<br> 
 

 
workaround 
 
<div class="container answer reverse"> 
 
    <div class="line"></div> 
 
</div>

이를 디버깅 할 수 있습니다.차라리 다른 방향에서 여러 애니메이션을 것 애니메이션을 역/다시 시작하기 위해 JS하고 트릭보다 : 당신의 리팩토링에 관해서

: 당신은 당신의 브라우저의 웹 개발 도구에 애니메이션 상태를 검사 할 수 있습니다 .

애니메이션의 복잡도에 따라 애니메이션 프레임과 반대되는 CSS 전환을 사용하는 것이 좋습니다. 애니메이션을 뒤집거나 다시 설정하는 것에 대해 걱정할 필요가 없습니다.