0
나는 전환과 애니메이션을 모두 이해하고 사용하지만, 결합하려고 할 때처럼 약간의 "장애"가 있다고 생각됩니다. 예를 들어, 색상으로 끝나는 애니메이션 스타일이 있고 -webkit-animation-fill-mode: forwards;으로 값을 무기한 설정하면 재정의 스타일을 설정할 수 있으면 부드럽게이 상태에서 다른 상태로 전환 할 수 있다는 것은 많은 의미가 있습니다.전환을 사용하여 CSS 애니메이션의 끝 상태에서 전환하는 방법이 있습니까?
jsfiddle을 참조하십시오. 노란색 스타일을 토글하는 것은 부드럽게 전환을 사용하지만 애니메이션을 사용하면 애니메이션 중에 초기 0-50 % 만 부드럽게 할 수 있습니다. 애니메이션 값이 설정되지 않은 경우 갑작스러운 순간 변경없이 일반 흰색 또는 노란색 배경으로 녹색 상태를 복구 할 수는 없습니다. 애니메이션이 활성화되면 !important 스타일을 완전히 무시합니다.
이 동작이 spec/WD/etc.에 얼마나 많이 지정되어 있는지는 알 수 없지만이 유형의 동작을 제한하면 CSS 애니메이션이 쓸모 없게되고 걱정 스럽지만 애니메이션은 전환과 함께 사용되는 자바 스크립트에서 단계별로 수행하는 것이 좋습니다. 그 단점은 그렇게하는 오버 헤드 추가 오버 헤드입니다.
그리고 "내가 무엇을 묻고있는 것인가"투표를하기 위해 내가 묻는 것은 최종 애니메이션 상태에서 다시 보간 할 수있는 애니메이션을 어떻게 만들 수 있는가하는 것입니다.
예를 들어. '0 % {background-color : green} 100 % {}'? 나는 그것을 고려하지 않았으며, 우아하지는 않지만, 나는 이것을 사용할 것이다 ... –
'reverse'의 사용은 제한적이다; 같은 순서가 반대로 재생됩니다. 그것은 종종 원하지 않습니다. ..... 그러나 나는 훨씬 더 맘에 드는 것을 얻었습니다. [new jsfiddle here] (http://jsfiddle.net/yt97wz13/)를 참조하십시오. 여기서 유일한 단점은 pageload에서 "닫는"애니메이션이 재생된다는 것입니다. 토글하는 동안 사용할 다른 클래스를 추가하면이 문제를 해결할 수 있습니다. –
당신의 솔루션에 흥미를 갖게되면 개인적으로 다른 효과가있는 것과 동일한 효과를 유지하면서 메시지를 표시하고 숨기는 '애니메이션 반복 시간 : 역방향'이 유용하다는 것을 알았습니다. 파이어 폭스에서 특정 애니메이션은 자바 스크립트를 통해 다이너믹하게 클래스를 추가합니다 – Diego