如何平滑地將CSS動畫恢復到當前狀態？

我有沒有動畫元素作爲默認值。還有一個觸發器可以讓我在該元素上關閉動畫&。動畫本身非常簡單：將元素從左向右移動回來。如何平滑地將CSS動畫恢復到當前狀態？

當我停止動畫時，我的元素顯然會回到初始位置。但它突然倒退，並不順利。所以當我關閉動畫到最初動畫時，它只是改變了它的位置。我的問題是：是否有一種方法可以使其順利停止，因此，當我關閉動畫時，它會回到初始位置，但流暢/動畫。

這裏是我的元素和動畫：http://jsfiddle.net/2Lwftq6r/

HTML：

<input type="checkbox" id="anim"> 
<label for="anim">Start/stop animation</label> 
<div></div>

CSS：

div { 
    margin-top: 50px; 
    width: 50px; height: 10px; 
    background: #000; 
    transform: translateX(0); 
} 

#anim:checked ~ div { 
    -webkit-animation: dance 2s infinite ease-in-out; 
    -moz-animation: dance 2s infinite ease-in-out; 
} 

@-webkit-keyframes dance { 
    0%, 100% { -webkit-transform: translateX(0); } 
    50% { -webkit-transform: translateX(300px); } 
} 
@-moz-keyframes dance { 
    0%, 100% { -moz-transform: translateX(0); } 
    50% { -moz-transform: translateX(300px); } 
}

來源

2015-05-09 Paweł

不幸的是，當前的CSS規範沒有對此行爲做出規定。這個問題有幾個解決方法（在停止/刪除動畫之後沒有轉換回「基態」），但它們都是基於JS的。你會考慮一個基於JS的解決方案嗎？ – Terry

[Smoothly stop CSS keyframe animation]可能的重複（http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation） – brenjt

你是指loop嗎？ –

退房This StackOverflow question。

你不會喜歡這個答案，但現實情況是，CSS3動畫沒有達到這個真的很有用。爲了使這項工作你將需要複製你的Javascript的很多你的CSS，其中種破壞點（例如在這個密切相關的答案 Change speed of animation CSS3?）。要真正讓它停下來，你最好的選擇就是在Greensock animation library 這樣的平臺上寫出動畫，它提供了所有你需要的工具，讓它實際上能夠平穩地停止，而不是突然停下來。

下面還有另外一個答案，它確實在使用CSS做出了努力，你可以看看那個。

來源

2015-05-09 21:04:09

在相關說明中，這是正在添加到角度animateCss服務的東西。 – Rorschach120

您不能僅通過CSS3存檔此效果，但如果您確實需要它，則可以使用jQuery + CSS3 Transitions。我的解決方案（http://jsfiddle.net/sergdenisov/3jouzkxr/10/）：

HTML：

<input type="checkbox" id="anim-input"> 
<label for="anim-input">Start/stop animation</label> 
<div class="anim-div"></div>

CSS：

.anim-div { 
    margin-top: 50px; 
    width: 50px; 
    height: 10px; 
    background: #000; 
} 

    .anim-div_active { 
     -webkit-animation: moving 2s ease-in-out infinite alternate; 
     animation: moving 2s ease-in-out infinite alternate; 
    } 

    .anim-div_return { 
     -webkit-transition: -webkit-transform 0.5s ease-in-out; 
     transition: transform 0.5s ease-in-out; 
    } 

@-webkit-keyframes moving { 
    0% { -webkit-transform: translateX(0); } 
    100% { -webkit-transform: translateX(300px); } 
} 

@keyframes moving { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(300px); } 
}

的Javascript：

$('#anim-input').on('change', function() { 
    var $animDiv = $('.anim-div'); 
    if (this.checked) { 
     $animDiv.removeClass('anim-div_return') 
       .addClass('anim-div_active'); 
     return; 
    } 

    var transformValue = $animDiv.css('webkitTransform') || 
         $animDiv.css('transform'); 
    $animDiv.css({'webkitTransform': transformValue, 
        'transform': transformValue}) 
      .removeClass('anim-div_active'); 

    requestAnimationFrame(function() { 
     $animDiv.addClass('anim-div_return') 
       .css({'webkitTransform': 'translateX(0)', 
         'transform': 'translateX(0)'}); 
    }); 
});

P.S. 供應商前綴基於http://caniuse.com的實際瀏覽器列表。

來源

2015-05-13 18:24:20

我只是有同樣的問題，我解決了它通過不使用動畫，它完美的作品！看看我的解決方案：所以我有這個鍋鏟，我不得不在上空盤旋，只動了，我想這回平穩過渡，所以這是我做過什麼：

#Spatula:hover{ 
    animation-direction:alternate; 
    transform: translate(1.2cm,1cm); 
    transition: all 1.5s; 
    -webkit-transition: all 1.5s; 

} 

#Spatula{ 
    -webkit-transition: all 1.5s; 
    transition: all 1.5s; 

}

祝你好運！

來源

2016-02-26 18:33:36

這真的有竅門！我永遠不會想到這一點。 –

如何平滑地將CSS動畫恢復到當前狀態？

回答

相關問題