CSS animasyonunu mevcut durumuna nasıl kolayca geri döndürürsünüz?

Question

Ben var varsayılan olarak elemanı animasyonlu değil. Ayrıca, bu öğe üzerinde & kapalı animasyon özelliğini açmamı sağlayan bir tetikleyici de var. Animasyonun kendisi çok basit: elemanı soldan sağa ve arkaya taşır. Ben animasyon durdurduğunuzda

, sonra benim eleman besbelli başlangıç ​​pozisyonuna geri gider. Ama aniden, sorunsuzca geri döner. Bu yüzden, animasyonu ilk basamağa döndürdüğümde konumunu değiştirir. Sorum şu: pürüzsüz bir şekilde durdurmanın bir yolu var, bu yüzden animasyonu kapattığımda ilk konumuna geri dönüyor, ama sorunsuz/hareketli.

İşte benim eleman ve animasyon var: 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); } 
} 

Answer 1

atın This StackOverflow question.

Bu konuda yanıt almak için gidiş değildir, ama gerçek CSS3 animasyonlar bunu başarmak için gerçekten yararlı değildir olmasıdır. Bu işi yapmak için tür noktasını tahrip sizin JavaScript CSS'nizde bir sürü çoğaltmak gerekir (gibi bu örneğin yakından cevap Change speed of animation CSS3? ilgili). Gerçekten de sorunsuz bir şekilde durmasını sağlamak için, animasyonunu, animasyonuna, gibi bir platformda yazmanız yeterli olacaktır. CSS kullanarak bir çaba yok bunun altında başka cevap da var

, o biri bakabilirsiniz.

Answer 2

Bu efekti yalnızca CSS3 şekilde arşivleyemezsiniz, ancak gerçekten ihtiyacınız varsa, jQuery + CSS3 Transitions'u kullanabilirsiniz. Benim çözümüm (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. Satıcı önekleri http://caniuse.com gerçek tarayıcılar listesinde dayanmaktadır.

Answer 3

Sadece aynı sorunu vardı ve animasyon kullanmayarak bunu çözmüş ve mükemmel çalışıyor!Benim çözüm göz atın: Bu yüzden ben sadece üzerinde süpürdü zaman taşımak zorunda kaldı bu spatula vardı ve onu geri sorunsuz geçiş için istedik, bu nedenle bu ne yaptım:

#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; 

} 

İyi şanslar!