Bir CSS3 animasyonunun son halini koruma

302

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. Bu doğru değil mi? Değilse, bunu nasıl yapabilirim?

Kod (ön ekli sürümler dahil değildir):

@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; }
}

css css-animations

— Dan
kaynak

1

Kendi tekrar bildirimimi göndereceğim: stackoverflow.com/questions/9196694/css3-animation-scale En azından benimkinin daha öğretici bir başlığı var!

— Dan

CSS3 Animate'in

— Michael Mullany

531

Eklemeyi deneyin animation-fill-mode: forwards;. Örneğin şöyle:

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

— Christofer Vilander
kaynak

1

Evet bu kadar. Yapabildiğim zaman cevabını kontrol edeceğim. Herhangi bir CSS başkanı gerekli olan mantık hakkında yorum yapmak isterse, bilmek isterim!

— Dan

8

Animasyon-doldurma modu özelliği hakkında buradan bilgi edinebilirsiniz - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Yardımcı olacağını umuyoruz!

— Christofer Vilander

6

@ Özelliğin forwardsdeğeri, animation-fill-modeöğenin animasyon bittikten sonra animasyonun son ana kare durumunu tutmasını sağlar. örneğin, animasyonunuz width0'dan 100 piksel'e değişirse , bu özellik, animasyon sona erdikten sonra öğenin 100 piksel genişlikte kalmasını sağlar.

— Farzad YZ

5

aksi takdirde işe yaramaz 100% / tonoktası belirtmeyi unutmayın @keyframe.

— Tomasz Mularczyk

animation-fill-mode: ileri doğru benim için hile yaptı, ama sadece kural için '! önemli' zorunlu ekledikten sonra

— shayuna

26

Daha fazla animasyon özelliği kullanıyorsanız kısayol:

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

Bu şunları verir:

2s süre
linear Zamanlama fonksiyonlu
0.5s gecikme
1 yineleme sayımı (sonsuz olabilir)
normal yön
forwards doldurma modu (son konumu son durum olarak kullanmak için uyumluluğa sahip olmak istiyorsanız geriye doğru ayarlayın)

— agiopnl
kaynak

14

EĞER KISA EL sürümünü kullanmayan: çalışmadığından emin olun ve animation-fill-mode: forwardsbir SONRA animasyon beyanı veya iş olmaz ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

— Taylor A. Leach
kaynak

1

Haklısın. Cevabım güncellendi. Teşekkürler, aklımı kaçırdı haha.

— Taylor

4

Animasyon doldurma modunu kullanın : ileri;

animation-fill-mode: forwards;

Öğe, son ana kare tarafından ayarlanan stil değerlerini koruyacaktır (animasyon yönüne ve animasyon-yineleme sayısına bağlıdır).

Not: @keyframes kuralı Internet Explorer 9 ve önceki sürümlerinde desteklenmez.

Çalışma örneği

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

Snippet'i genişlet

— Deepu Reghunath
kaynak