Bir CSS3 animasyonu sonunda son durumu sürdürme

177

CSS'de opacity: 0; olarak ayarlanmış bazı öğeler üzerinde bir animasyon çalıştırıyorum. Animasyon sınıfı onClick uygulanır ve ana kareler kullanılarak, opaklığı 0'dan 1'a (diğer şeylerin yanı sıra) değiştirir.Bir CSS3 animasyonu sonunda son durumu sürdürme

Ne yazık ki, animasyon bittiğinde, öğeler opacity: 0 (hem Firefox'ta hem de Chrome'da). Doğal düşüncem, animasyonlu unsurların orijinal özelliklerini koruyarak nihai halini sürdürmeleri olurdu. Bu doğru değil mi? Ve değilse, öğeyi nasıl yapabilirim?

kodu (öneki dahil değildir sürümleri):

@keyframes bubble { 
    0% { transform:scale(0.5); opacity:0.0; } 
    50% { transform:scale(1.2); opacity:0.5; } 
    100% { transform:scale(1.0); opacity:1.0; } 
}

kaynak

2012-10-20 Dan

Kendi yineleme bildirimi göndereceğim: http://stackoverflow.com/questions/9196694/css3-animation-scale En azından benimki daha öğretici bir başlığa sahip! – Dan

olası kopyası [CSS3 Animate: Animasyon çalıştırıldıktan sonra nesnenin başlangıç konumuna nasıl geri dönülmez?] (Http://stackoverflow.com/questions/6897724/css3-animate-how-to-have-the- nesne-değil-geri-başlangıç-pozisyon-sonra-bir) –

300

deneyin animation-fill-mode: forwards; ekledi. Böyle Örneğin:

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

kaynak

2012-10-20 18:02:03

Yup öyle. Yapabileceğim zaman cevabınızı kontrol edeceğim. Eğer herhangi bir CSS-başlığı, gerekli olanın arkasındaki mantığa yorum yapmak isterse, bunu bilmek isterim! – Dan

Animasyon-doldurma modu özelliğini buradan okuyabilirsiniz - http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Umarım yardımcı olur! –

@ Animasyon doluluk modu işlevinin “ileri” değerini kullan, animasyon sonlandıktan sonra animasyonun son ana kare karesi durumunu koruyacağını garanti eder. Örneğin, animasyonunuz "genişlik" değerini 0'dan 100 piksele değiştirirse, bu özellik, öğenin animasyon bittikten sonra 100 piksel genişliğinde kalmasını sağlar. –

daha animasyon kullanarak ise kısaltmadır özellikleri:

2s süresi, doğrusal zamanlama fonksiyonu, 0.5s gecikme, 1 yineleme-sayısı, normal yön için

animation: bubble 2s linear 0.5s 1 normal forwards;

, ileri dolgu modu

kaynak

2017-01-14 00:28:01 agiopnl

Bir CSS3 animasyonu sonunda son durumu sürdürme

cevap

İlgili konular