Animasyon özelliği verildiğinde elemanlar kaybolur

Question

Bu HTML öğesinin tıklandığında güzel bir geçiş etkisi oldu. Ancak, animation özelliğiyle başka bir sınıf eklediğimde, geçiş kayboldu. demo bak: http://codepen.io/kunokdev/pen/rewveJ

<div 
    class="main-menu-item zoom-in-entrance"> 
    Test 
    </div> 

animation ve transition özellikleri yığını değil mi? animation özelliğinden

@keyframes zoom-in-entrance 
    from 
    opacity: 0 
    -webkit-transform: scale3d(.3, .3, .3) 
    transform: scale3d(.3, .3, .3) 

    50% 
    opacity: 1 

.zoom-in-entrance 
    -webkit-animation: zoom-in-entrance .25s forwards 
    animation: zoom-in-entrance .25s forwards 

.main-menu-item 
    cursor: pointer 
    background: $white 
    transition: all .25s 
    &:active 
    +scale(0.95,0.95) 
    i, span 
    display: block 

Sadece animasyon sayfa yüklendiğinde olur ve bir daha asla, ancak transition gelen animasyon unsuru tıklandığında sadece ne olur. İkisini de nasıl çalıştırırım?

Answer 1

Hem sizin animation ve transition özellikleri scale etkilemeye çalışıyoruz. Bunun nedeni, animasyon dolgu modu olarak forwards'u belirttiğinizdir. (

-webkit-animation: zoom-in-entrance .25s none 
animation: zoom-in-entrance .25s none 

: Animasyon öğenin "varsayılan" durumuna biter yana

, geçiş efekti almak için izin, bunun yerine none kullanabilir ve animasyon scale1.0 de tutamaz Eğer forwards kaldırırsanız http://codepen.io/anon/pen/XdgqNq

Answer 2

js'yi kullanabiliyorsanız, animasyon tamamlandıktan sonra girişte yakınlaştırma sınıfını kaldırabilirsiniz.

Callback when CSS3 transition finishes

Answer 3

: varsayılan dolgu modu bulunuyor olarak ayrıca sadece

) Güncelleme kalem none dışarı bırakabilir Animasyonun son halini belirleyen, iyi çalışıyor.