부드럽게 CSS 애니메이션 중반 애니메이션을 변경하십시오.

Question

저는 반 완성 된 CSS 애니메이션에서 다음 CSS 애니메이션으로 자연스럽게 전환하려고하고 있습니다. 약간의 더듬 거리지 않고 그것을 할 수있는 방법을 찾을 수 없습니다. 매우 빠른 속도로 무한대의 애니메이션을 만들었으므로 가볍게 클릭하여 멈춰야합니다. 지금은 애니메이션을 전환하는 동안 항상 약간의 hickup이 발생합니다. 아마도 다음 애니메이션을 시작하기 전에 다음 requestAnimationFrame을 기다릴 필요가 있기 때문일 수 있습니다. 다른 옵션이 있습니까? 대략 다음과 같습니다.

function onClick(){ 
    // get current location of element 
    var content = $(".content"); 
    var currentOffset = $(content[0]).css("top"); 

    // set property to stop jumping back to the beginning of current animation 
    content.css({ top: currentOffset }); 

    // stop the current animation 
    content.removeClass("anim-infinite"); 

    // update content based on current location 
    // updateContent(currentOffset); 

    // setup ease-out animation 
    window.requestAnimationFrame(function() { 
    content.addClass("anim-ease-out"); 
    content.css({ top: parseFloat(currentOffset) + 50 });  
    }); 
} 

여기에 관련 CSS가 있습니다.

@keyframes "spin" { 
    from { top: 0 }; 
    to { top: -200%; } 
} 
.anim-infinite{ 
    animation: spin 1s linear infinite; 
} 
.anim-ease-out{ 
    transition: all 0.25s ease-out; 
} 

거리와 시간 간격은 두 애니메이션 사이에서 일정한 속도를 유지하는 데 적당하며 관련된 브라우저 접두사를 사용하고 있습니다.

두 번째 애니메이션에 대해 "선형"타이밍 기능을 사용할 때 동일한 잡음이 발생합니다. 성공하지 않고 animation-fill-mode:both을 설정하려고했습니다. 완료된 애니메이션에만 영향을 미치는 것으로 보입니다.

콘텐츠의 위치에 따라 콘텐츠를 업데이트하려고 할 때 더듬이가 심해집니다. 이는 애니메이션이 중단되는 시점에 따라 다릅니다.

Answer 1

문제를 데모하는 jsFiddle을 찾으려고 노력하는 동안 나는 대부분의 더듬이의 원인을 발견했습니다. anim-infinite 클래스를 제거 할 때와 requestAnimationFrame을 제거하는 사이에 발생하는 모든 사항은 특히 content에서 DOM을 수정하고 내용을 리플 로우하는 경우 큰 성능 영향을 미칠 수 있습니다. 돌이켜 보면 분명하지만 DOM 업데이트가 예상보다 큰 영향을 미쳤습니다.

나는 약간의 가끔씩 말더듬기가 있지만 지금은 "충분하다".

다음은 fiddle입니다.