CSS arka plan yakınlaştırma animasyonu fareyi dışarı atıyor

Question

Arka plan resmini yavaşça yakınlaştırmak için bir ana kare animasyonu ekledim ve mükemmel çalışıyor, ancak fareyi hareket ettirdiğimde, animasyon uzaklaştırmak yerine orijinal duruma geri dönüyor.

#startup.hover:before { 
opacity:1; 

-webkit-animation: animatedBackground 5s ease-in-out 1; 
-moz-animation: animatedBackground 5s ease-in-out 1; 
animation: animatedBackground 5s ease-in-out 1; 

-webkit-animation-fill-mode: forwards; 
animation-fill-mode: forwards; 
} 

@-webkit-keyframes animatedBackground { 

0% { 
-webkit-transform: scale(1, 1); 
    -moz-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -o-transform: scale(1, 1); 
     transform: scale(1, 1); 
} 

100% { 
-webkit-transform: scale(1.1, 1.1); 
    -moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -o-transform: scale(1.1, 1.1); 
     transform: scale(1.1, 1.1); 
    } 
} 

Burada bir şey mi eksik?

Answer 1

Her şeyden önce ekliyorsunuz veya kullanmak istediğiniz bir sınıfta mı bulunuyorsunuz? Sadece bunu işaret ediyor. Bunun bir sınıf olduğunu varsayarak, geçiş animasyonunu kimliğe eklemelisiniz.

Bu nedenle, dışarı çıkarken kırılmasının nedeni budur. Sınıfsız bir geçiş animasyonu yok!

Answer 2

Bu efekti oluşturmak için anahtar kareler gibi gelişmiş bir araca ihtiyacınız yoktur.

Geçişlerle kolayca elde edilebilir, işte bir örnek. https://jsfiddle.net/vqL3stjz/

.animable{ 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
    transition: all 500ms; 
} 

.animable:hover{ 
    transform: scale(1.3, 1.3); 
    transition: all 500ms; 
} 

Ve anahtar kareler ile bunu yapmak gerekirse, o zaman ben sadece unhovered elemana ters animasyon uygulamak öneririz. Ancak, animasyon o vb

TL yüklendiğinde hemen sonra eleman üzerinde çalışan gibi yan etkisini önlemek için, sonra bazı javascript kullanmanız gerekecektir; Eğer gerçekten kareleri kullanmak zorunda olmadıkça DR Daha İyi, tranistions kullanın.