Keyframes nedir?
@keyframes kuralını ve animasyon temellerini öğrenirsin.
@keyframes nedir?
CSS animasyonlarının kalbi @keyframes bölümüdür. Bir animasyonun başlangıç ve bitişini, aradaki adımları burada tanımlarsın. Her @keyframes bölümü bir ad alır: @keyframes spin { ... }. Bu ad daha sonra öğeye animation-name ile bağlanır.
İçinde en az iki adım olur: from başlangıç, to bitiştir. Yüzde ile de yazılabilir: 0% ve 100%. Kısa bir bölüm, bir öğeyi canlandırır.
from/to yerine yüzde
from ve to yalnızca iki adımlı animasyonlar içindir. Daha fazla adım istersen yüzde kullan: 0%, 50%, 100%. Bu, ara durakları tanımlamana izin verir.
Örneğin bir nabız animasyonu üç adımlı olabilir: başta küçük, ortada büyük, sonda tekrar küçük. Yüzde adımları bu tür hareketleri kurar. from ile 0% aynıdır; to ile 100% aynıdır.
Uygulama Nabız animasyonunu yaz
Bir .notice etiketinin nabız gibi atmasını istiyoruz. pulse adında bir @keyframes bölümü yaz. from adımında transform: scale(1), to adımında transform: scale(1.1) olsun.
Örnek çözümü göster
/* nabız animasyonu */
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}Kendini test et
-
Hangisi geçerli bir @keyframes bölümüdür?
/* ??? */- keyframes: spin { from { opacity: 0; } to { opacity: 1; } }
- animation: spin { from { opacity: 0; } to { opacity: 1; } }
- @keyframes { from { opacity: 0; } to { opacity: 1; } }
- @keyframes spin { from { opacity: 0; } to { opacity: 1; } }
Cevabı göster
@keyframes spin { from { opacity: 0; } to { opacity: 1; } } — Doğru. @keyframes'ten sonra ad, süslü parantez içinde from ve to adımları gelir.
-
Anahtar kare değerini anlamıyla eşleştir
- from
- Başlangıç adımı
- to
- Bitiş adımı
- 0%
- Başlangıç (yüzde)
- 100%
- Bitiş (yüzde)
- 50%
- Orta adım
-
@keyframes adını tamamla
@keyframes ____ { from { opacity: 0; } to { opacity: 1; } }Cevabı göster
@keyframes spin { from { opacity: 0; } to { opacity: 1; } } -
50% animasyonun neresini ifade eder?
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }- Animasyonun başlangıcı
- Animasyonun hızı
- Animasyonun ortası
- Animasyonun bitişi
Cevabı göster
Animasyonun ortası — Doğru. 50% animasyonun ortasını ifade eder.