Ana Kare Animasyon Sözdizimi - CSS Hileleri

Anonim

Temel Beyan ve Kullanım

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Kısacası, bu sayfadaki kodun geri kalanı herhangi bir ön ek kullanmayacaktır, ancak gerçek dünya kullanımı, yukarıdaki tüm satıcı öneklerini kullanmalıdır

Birden çok adım

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Bir animasyon aynı başlangıç ​​ve bitiş özelliklerine sahipse, bunu yapmanın bir yolu% 0 ve% 100 değerlerini virgülle ayırmaktır:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Veya, animasyona her zaman iki kez (veya herhangi bir çift sayıda) çalışmasını ve yönünü söyleyebilirsiniz alternate.

Ayrı özelliklere sahip ana kare animasyonunu çağırma

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Animasyon Shorthand

Sadece tüm bireysel değerleri boşlukla ayırın. Hem süreyi hem de gecikmeyi kullanmanın dışında sıra önemli değildir, bu sırada olmaları gerekir. Aşağıdaki örnekte 1s = süre, 2s = gecikme, 3 = yineleme.

animation: test 1s 2s 3 alternate backwards

Dönüşümü ve animasyonu birleştirin

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Çoklu animasyonlar

Bir seçicide birden çok canlandırma bildirmek için değerleri virgülle ayırabilirsiniz.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Adımlar ()

Steps () işlevi, animasyon zaman çerçevesinde tam olarak kaç anahtar karenin oluşturulacağını kontrol eder. Diyelim ki beyan ettiniz:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Animasyonunuzda (10). Adımları kullanırsanız, ayrılan sürede yalnızca 10 anahtar karenin gerçekleşmesini sağlar.

.move ( animation: move 10s steps(10) infinite alternate; )

Matematik orada güzel çalışıyor. Her saniyede bir, öğe animasyonun sonuna kadar 10 piksel sola ve 10 piksel aşağıya hareket edecek ve ardından sonsuza kadar tersine hareket edecektir.

Bu, simurai'nin yaptığı bu demo gibi hareketli grafik sayfası animasyonu için harika olabilir.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
4 * 5 * 10 12 5.1 *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6.0-6.1 *

Daha fazla kaynak

  • MDN Belgeleri
  • MDN: CSS Animasyonunu Kullanma
  • Kullanabilir miyim - Tarayıcı Desteği
  • VİDEO: CSS Animasyonlarına Giriş