CSS Animation özelliği, animasyondan sonra kalıyor

94

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 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Bunu jQuery ile nasıl yapacağımı biliyorum .. böyle olurdu ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

css css-animations

— SparrwHawk
kaynak

Mı W3Schools modası geçmiş? Chrome ve FireFox'un yalnızca alternatifleri desteklediğini söylüyor.

— iambriansreed

5

@iambriansreed: Her zaman öyle olduğunu varsayıyorum :)

— BoltClock

4

@iambriansreed w3schools arama sonuçlarını tıklamayın bile. Yanlışlıkla yaparsanız, monitörünüzden uzağa bakın ve farenizdeki geri düğmesine basın.

— doug65536

167

animation-fill-modeCSS3 özelliğini aradığınızı düşünüyorum

https://developer.mozilla.org/en/CSS/animation-fill-mode

Animasyon doldurma modu CSS özelliği, bir CSS animasyonunun, yürütülmeden önce ve sonra hedefine stilleri nasıl uygulaması gerektiğini belirtir.

amacın için sadece ayarlamayı dene

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

İleri değerin ayarlanması «hedef, yürütme sırasında karşılaşılan son anahtar kare tarafından ayarlanan hesaplanan değerleri koruyacaktır»

— Fabrizio Calderan
kaynak

1

Teşekkürler Fabrizio, bu harika, bu cevabı kabul edeceğim. Hakkında bir şey bilip bilmediğinizi merak ettiğim tek bir garip şey oluyor - iOS'ta (başka bir şey test etmedim), kolay giriş için geri sayım her kaydırdığımda duraklıyor, örneğin sayfa yüklendiğinde hemen kaydırmaya başlarsam solmaz. Ama kaydırmayı DURDURDUĞUM zaman 3'ler geri saymaya başlar. Bu sadece varsayılan iOS davranışı mı? Teşekkürler

— SparrwHawk

Ne harika bir çözüm.

— Lalnuntluanga Chhakchhuak

Bu ham SVG animasyonunda mevcut mu?

— Justin

16

Ek olarak cevap ait @Fabrizio Calderan , o bile uygulayabileceğiniz söylenmesi gerekiyor animation-fill-modeözelliğini forwardsdoğrudan animation. Dolayısıyla aşağıdakiler de çalışmalıdır:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

Snippet'i genişlet

— yckart
kaynak

1

Bir öğe nasıl canlandırılır ve animasyon yapılırken kalmasını sağlar:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

Snippet'i genişlet

— codeWithMe
kaynak

0

Bana da benzer bir şey oldu. Konum ekledim: canlandıran öğeye göre ve bu benim için onu düzeltti.

— Tyau
kaynak