CSS3 Animasyonunu son karede durdurma

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: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Arıyorsun:

animation-fill-mode: forwards;

CanIuse'da MDN ve tarayıcı destek listesi hakkında daha fazla bilgi .

Bu davranışı steno animationözellik tanımına eklemek istiyorsanız , alt özelliklerin sırası aşağıdaki gibidir

animation-name- varsayılan none

animation-duration- varsayılan 0s

animation-timing-function- varsayılan ease

animation-delay- varsayılan 0s

animation-iteration-count- varsayılan 1

animation-direction- varsayılan normal

animation-fill-mode- bunu şu şekilde ayarlamanız gerekir: forwards

animation-play-state- varsayılan running

Bu nedenle en yaygın durumda, sonuç böyle bir şey olacaktır

animation: colorchange 1s ease 0s 1 normal forwards;

MDN belgelerine buradan bakın

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Tarayıcı Desteği

• Chrome 43.0 (4.0-web seti-)
• IE 10.0
• Mozilla 16.0 (5.0-moz-)
• Shafari 4.0-web seti-
• Opera 15.0 -webkit- (12.112.0 -o-)

Kullanımı: -

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

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


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

En iyi yol, nihai durumu css'in ana kısmına koymak gibi görünüyor. Burada olduğu gibi, genişlik koydum 220px, böylece sonunda olur 220px. Ancak0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Sorun, webkitAnimationName öğesinin hiçbir şeye geri ayarlanması değil, bu nedenle nesneniz için CSS'yi varsayılan durumuna sıfırlıyor. Durumu sıfırlayan setTimeout işlevini kaldırırsanız nerede kalmaz?

Ben de benzer bir cevap gönderdim ve muhtemelen bir göz atmak istersiniz:

http://www.w3.org/TR/css3-animations/#animation-events-

Bir animasyonun başlatma ve durdurma gibi yönlerini öğrenebilir ve ardından 'stop' olayının tetiklendiğini söyledikten sonra dom'a istediğiniz her şeyi yapabilirsiniz. Bunu bir süre önce denedim ve işe yarayabilir, ama sanırım şimdilik webkit ile sınırlı kalacaksınız (ama muhtemelen bunu zaten kabul ettiniz). Btw, 2 cevap için aynı bağlantıyı yayınladığım için, bu genel tavsiyeyi sunacağım: W3C'ye göz atın - kuralları hemen yazıyorlar ve standartları açıklıyorlar. Ayrıca, webkit geliştirme sayfaları oldukça önemlidir.

Aslında kimse bunu getirmedi, işe yaratılma şekli duraklatılmış animasyon-oynatma durumudur .

Bugün, doldurma modu için kullanmak istediğiniz bir sınır olduğunu öğrendim. Bu bir Apple geliştiricisindendir. Söylentiler altı civarında * ama kesin değil. Alternatif olarak, sınıfınızın başlangıç ​​durumunu animasyonun bitmesini istediğiniz şekilde ayarlayabilir ve ardından / 0% 'dan * başlatabilirsiniz *.