animationCSS özelliği hareketlendirmek birçok CSS özellikleri gibi kullanılabilir color, background-color, heightya da width. Her animasyonun @keyframes, daha sonra animationözellik ile çağrılan at-kuralı ile tanımlanması gerekir , örneğin:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Her bir @keyframeskural, animasyon sırasında belirli anlarda ne olması gerektiğini tanımlar. Örneğin,% 0 animasyonun başlangıcı ve% 100 sondur. Bu anahtar kareler daha sonra animation, bu anahtar karelerin nasıl işleneceği konusunda daha fazla kontrol sağlamak için steno özelliği veya sekiz alt özelliği tarafından kontrol edilebilir.
Alt mülkler
animation-name: işlenecek@keyframesat-kuralının adını bildirir .animation-duration: bir animasyonun bir döngüyü tamamlaması için geçen süre.animation-timing-function:easeveya gibi önceden ayarlanmış hızlanma eğrilerini oluştururlinear.animation-delay: yüklenen öğe ile animasyon dizisinin başlangıcı arasındaki süre (harika örnekler).animation-direction: döngüden sonra animasyonun yönünü ayarlar. Her döngüde varsayılan sıfırlanır.animation-iteration-count: animasyonun kaç kez gerçekleştirilmesi gerektiği.animation-fill-mode: animasyondan önce / sonra hangi değerlerin uygulanacağını ayarlar.
Örneğin, animasyonun son durumunu ekranda kalacak şekilde ayarlayabilir veya animasyonun başladığı zamandan öncesine geçecek şekilde ayarlayabilirsiniz.animation-play-state: animasyonu duraklatır / oynatır.
Bu alt özellikler daha sonra şu şekilde kullanılabilir:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )İşte bu alt özelliklerin her birinin alabileceği değerlerin tam listesi:
animation-timing-function | kolaylık, gevşetme, kolaylaştırma, kolaylık sağlama, doğrusal, kübik bezier (x1, y1, x2, y2) (örn. cubic-bezier (0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs veya Xms |
animation-delay | Xs veya Xms |
animation-iteration-count | X |
animation-fill-mode | ileri, geri, her ikisi, hiçbiri |
animation-direction | normal, alternatif |
animation-play-state | duraklatıldı, koşuyor, koşuyor |
Birden çok adım
Bir animasyon aynı başlangıç ve bitiş özelliklerine sahipse, içindeki% 0 ve% 100 değerlerini virgülle ayırmak yararlıdır @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Çoklu animasyonlar
Bir seçicide birden çok canlandırma bildirmek için değerleri virgülle ayırabilirsiniz. Aşağıdaki örnekte, çemberin rengini bir @keyframeyandan diğerine dürtürken bir yandan da değiştirmek istiyoruz .
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Verim
Çoğu özelliği canlandırmak bir performans sorunudur, bu nedenle herhangi bir özelliği canlandırmadan önce dikkatli davranmalıyız. Ancak, güvenli bir şekilde canlandırılabilen belirli kombinasyonlar vardır:
transform: translate()transform: scale()transform: rotate()opacity
Hangi özellikler canlandırılabilir?
MDN, canlandırılabilen CSS özelliklerinin bir listesine sahiptir. Canlandırılabilir özellikler renklere ve sayılara eğilimlidir. Canlandırılamayan bir özelliğe bir örnek background-image.
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 bilgi
- MDN'de animasyon
- CSS animasyonlarını kullanma
- W3C'de animasyon
- Daha iyi işleme performansı için jank bozma
- İş yerinde web animasyonu
- Sorumlu bir şekilde canlandırmanın beş yolu
- Durum Atlama, Negatif Gecikmeler, Animasyon Başlangıcı ve Daha Fazlası
- CSS animasyonlarını yolun ortasında başlatma
- Yüksek performanslı animasyonlar