«css-animations» etiketlenmiş sorular

opacity: 0;CSS olarak ayarlanmış bazı öğeler üzerinde bir animasyon çalıştırıyorum . Animasyon sınıfıClick'e uygulanır ve anahtar kareler kullanılarak opaklığı 0olarak 1(diğer şeylerin yanı sıra) olarak değiştirir. Ne yazık ki, animasyon bittiğinde öğeler opacity: 0(Firefox ve Chrome'da) geri döner . Doğal düşüncem, animasyonlu öğelerin orijinal özelliklerini geçersiz kılarak nihai durumu koruyacağıdır. …

302 css  css-animations 

Şu anda, bu kodu var: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } Yanıp sönüyor, ancak yalnızca "tek yönde" yanıp sönüyor. Yani, sadece kayboluyor ve sonra tekrar ortaya çıkıyor opacity: …

288 html  css  css-animations  opacity 

Javascript kullanmadan sayfa yüklemesinde CSS3 geçiş animasyonu kullanılabilir mi? Bu benim istediğim, ama sayfa yük: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Şimdiye kadar bulduğum şey CSS3 geçiş gecikmesi , elemanlar üzerindeki etkileri geciktirmenin bir yolu. Sadece fareyle üzerine gelindiğinde çalışır. CSS3 Keyframe , yük üzerinde çalışıyor ancak aşırı yavaş. Bu yüzden faydalı değil. CSS3 geçişi …

196 css  webkit  css-transitions  css-animations 

Tıklamayla oynayan 4 bölümlü bir CSS3 animasyonum var - ancak animasyonun son kısmı onu ekrandan çıkarmak içindir. Ancak, oynadıktan sonra her zaman orijinal durumuna geri döner. Herkes son css çerçevesinde (% 100) nasıl durdurabileceğini ya da oynadıktan sonra tüm div'den nasıl kurtulacağını biliyor . @keyframes colorchange { 0% { transform: …

181 css  css-animations 

Birkaç demoyu gözden geçirdim ve neden CSS3 spin'in çalışamadığını bilmiyorum. Chrome'un en son kararlı sürümünü kullanıyorum. Keman: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: infinite; …

158 css  css-animations 

Bu yüzden, hem CSS3 geçişlerini hem de animasyonları nasıl yapacağımı anlıyorum. Açık olmayan ve googled olan, ne zaman kullanılacağıdır. Örneğin, bir top zıplatma yapmak istersem, animasyonun gitmenin yolu olduğu açıktır. Anahtar kareleri sağlayabilirim ve tarayıcı ara kareleri yapabilirdi ve güzel bir animasyon olacak. Bununla birlikte, bahsedilen etkinin her iki şekilde …

157 css  css-transitions  css-animations 

Gerçekten javascript veya metin dekorasyonu kullanmadan bir parça metnin eski okul stilini göz kırpmasını istiyorum. Geçiş yok, sadece * yanıp sönüyor *, * yanıp sönüyor *, * yanıp sönüyor *! DÜZENLEME : Bu farklı bu soruya ben sormak çünkü yanıp diğer soruların OP nasıl sorar oysa sürekli geçişler olmadan değiştirmek …

149 html  css  css-animations  blink 

Görünüşe göre, Google Chrome'da, a yaptıktan sonra bulanık metne neden olan bir güncelleme yapılmış transform: scale(). Özellikle şunu yapıyorum: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Chrome'da http://rourkery.com adresini …

129 google-chrome  css  webkit  transform  css-animations 

İki CSS animasyonunun farklı hızlarda oynatılmasını nasıl sağlayabilirim ? Görüntü aynı anda dönüyor ve büyüyor olmalıdır. Dönüş her 2 saniyede bir dönecektir. Büyüme her 4 saniyede bir dönecektir. Örnek Kod: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; …

120 css  css-animations 

Bu kadar basit bir şey kolayca başarılmalı, yine de saçlarımı ne kadar karmaşık olduğu konusunda çekiyorum. Tek yapmak istediğim, bir React bileşeninin montajını ve sökülmesini canlandırmak, hepsi bu. Şimdiye kadar denediklerim ve her çözümün neden işe yaramayacağı aşağıda açıklanmıştır: ReactCSSTransitionGroup - CSS sınıflarını hiç kullanmıyorum, hepsi JS stilleri, yani bu …

103 animation  reactjs  css-animations  greensock  react-motion 

Tamamladıktan sonra kalmak için bir CSS animasyon özelliği almaya çalışıyorum, bu mümkün mü? Başarmaya çalıştığım şey bu ... Öğe, kullanıcı sayfaya geldiğinde gizlenmeli, 3 saniye sonra (veya her neyse), yavaşlamalıdır ve animasyon tamamlandığında orada kalmalıdır. İşte bir keman girişimi ... http://jsfiddle.net/GZx6F/ İşte koruma kodu ... <h2>Test</h2> <style> @keyframes fadeIn { …

94 css  css-animations 

Bir üç nokta animasyonuna sahip olmaya çalışıyorum ve bunun CSS animasyonlarıyla mümkün olup olmadığını merak ediyordum ... Yani şöyle olabilir Loading... Loading.. Loading. Loading... Loading.. Ve temelde böyle devam edin. Herhangi bir fikir? Düzenleme: böyle: http://playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

CSS ile bir roller coaster tarzı animasyon oluşturmaya çalışıyorum. Döngü aşamasında "bardak altlığı" nasıl eğri bilmek istiyorum. Tamamen bir CSS çözümü arıyorum, ancak biraz JavaScript'e ihtiyaç duyuyorsanız, bununla sorunum yok. şimdiye kadar benim kod: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; …

15 html  css  css-animations  css-transforms