Animasyon, etkileşimli öğeleri vurgulamanın ve ilgi çekmenin harika bir yoludur ve eğlenceyi tasarımlarınıza dahil edin. Bu modülde, animasyon efektlerini nasıl kullanacağınızı göstereceğim.
Bazen, karşılaşabileceğiniz bazı yararlı ipuçları sağlayan arayüzlerde kullanıcının bulunduğu bölüme ilişkin bilgiler sağlar. Bu toplantılarda genellikle size bilginin mevcut olduğunu bildirir ve gerektiğini bileceksiniz. Bu modülde, CSS'ye dokunun.
Animasyon kareleri olan bir animasyon dizisi ayarlamak için CSS'yi kullanabilirsiniz. Bu diziler basit, tek durumlu animasyonlar veya karmaşık, zamana dayalı diziler olabilir.
Animasyon karesi nedir?
Çoğu animasyon aracında animasyon kareleri, animasyon atamak için kullandığınız mekanizmadır. zaman damgalarına dönüştürmenizi sağlar.
Örneğin, aşağıda yanıp sönen "yardımcı" için bir zaman çizelgesi verilmiştir nokta. Animasyon çalışır 1 saniye uzunluğunda ve 2 durumu var.
Bu animasyon durumlarının her birinin başladığı ve bittiği belirli bir nokta vardır. Bunları zaman çizelgesinde animasyon kareleriyle eşlersiniz.
@keyframes
CSS @keyframes
animasyon kareleriyle aynı kavramı temel alırlar.
Aşağıda, iki eyalet içeren bir örnek verilmiştir:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
İlk önemli kısım,
özel tanımlayıcı (custom-ident
)
animasyon kareleri kuralının adını
değiştirmeniz gerekir. Bu örnekteki tanımlayıcı my-animation
'dır.
Özel tanımlayıcı bir işlev adı gibi çalışır.
Böylece, CSS kodunuzun başka bir yerinde animasyon kareleri kuralına başvuruda bulunabilirsiniz.
Animasyon kareleri kuralının içinde from
ve to
, 0%
ve
100%
, animasyonun başlangıcı ve bitişidir.
Aynı kuralı aşağıdaki gibi yeniden oluşturabilirsiniz:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Zaman aralığı boyunca istediğiniz kadar konum ekleyebilirsiniz. Yanıp sönen yardımcı örneğinde, iki durum reklama dönüşen iki durum vardır: animasyon kareleri. Bu, animasyon kareleri kuralınızın içinde iki konum olduğu anlamına gelir: bu animasyon karelerinin her biri için değişiklikleri temsil eder.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
mülkleri
@keyframes
öğenizi bir CSS kuralında kullanmak için çeşitli animasyonlar tanımlayabilirsiniz.
ya da animation
özelliğini kullanarak
steno özelliği olabilir.
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration
özelliği, @keyframes
zaman çizelgesinin zaman değeri olarak ne kadar uzun olması gerektiğini tanımlar.
Varsayılan olarak 0 saniyeye ayarlanır. Bu, animasyonun çalışmaya devam ettiği ancak daha sonra devam edeceği anlamına gelir.
bir şablondur. Negatif zaman değerleri kullanamazsınız.
animation-timing-function
Animasyonda doğal hareketin yeniden oluşturulmasına yardımcı olması için zamanlama
fonksiyonlarını kullanabilirsiniz.
animasyonun her bir noktadaki hızını hesaplayabilirsiniz. Hesaplanan değerler genellikle
kavisli, animasyonun yayın süresi boyunca değişken hızlarda
animation-duration
gibi bir öğe raporlanması ve tarayıcı
@keyframes
içinde tanımlananlardan başka bir değer hesaplar.
CSS'de önceden belirlenmiş ayar olarak kullanılan ve
animation-timing-function:
linear
, ease
, ease-in
, ease-out
, ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Yumuşak geçiş
Bézier eğrisi, hızı modellemek için kullanılan bir işlev türü. Her bir zamanlama
işlev anahtar kelimeleri (ör. ease
) önceden tanımlanmış bir Bézier eğrisine referans verir. CSS'de
cubic-bezier()
işlevini kullanarak doğrudan bir Bézier eğrisi tanımlayabilirsiniz.
(dört sayı değerini kabul eder: x1
, y1
, x2
, y2
).
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Bu değerler, eğrinin her bir bölümünü X ve Y ekseni boyunca gösterir.
Bézier eğrilerini anlamak karmaşıktır. Bunun gibi görsel araçlar generator anahtar kelimesi oldukça faydalıdır.
steps
yumuşak geçiş işlevi
Bazen animasyonunuzu daha ayrıntılı bir şekilde kontrol etmek isteyebilirsiniz.
bir eğri boyunca değil, aralıklarla hareket etmesi gerekir. steps()
yumuşak geçiş işlevi şunları sağlar:
Zaman çizelgesini tanımlı olarak eşit süreye sahip aralıklara bölersiniz.
.my-element {
animation-timing-function: steps(10, end);
}
İlk bağımsız değişken sayı adımlarıdır. Her bir anahtar kelime için animasyon karelerini adım olarak oynatır. Her animasyon karesi, oynatıldığı süre boyunca hiçbir zaman geçiş yapmadan kendi adımında Adımlardan daha az animasyon karesi varsa tarayıcı adımların arasına animasyon kareleri gösterilir.
İkinci bağımsız değişken yönlendirmedir. end
değerine ayarlanırsa
Zaman çizelgenizin sonunda adımlar tamamlanır. start
değerine ayarlanırsa
animasyonunuzun ilk adımı başlar başlamaz tamamlanır. Yani
end
saatinden bir adım önce sona eriyor.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count
özelliği, @keyframes
zaman çizelgesinin
animasyon ekler. Varsayılan olarak bu değer 1'dir. Bu, animasyonun
zaman çizelgenizin sonuna ulaşması gerekir. Bu değer negatif bir sayı olamaz.
Animasyon döngünüzü oluşturmak için yineleme sayısını infinite
olarak ayarlayın. İşte bu şekilde:
bu dersin başındaki parlayıp sönen animasyonun nasıl çalıştığını gösterir.
animation-direction
.my-element {
animation-direction: reverse;
}
Zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde ilerleyeceğini animation-direction, şu değerleri alır:
normal
: yönlendirme olan varsayılan değerdir.reverse
: Zaman çizelgenizde geriye doğru koşur.alternate
: Her animasyon yinelemesi için zaman çizelgesi her şeyi öğreteceğim.alternate-reverse
:alternate
gibi, ancak animasyon zaman çizelgesini geriye dönük olarak takip edebilirsiniz.
animation-delay
.my-element {
animation-delay: 5s;
}
Animasyon-gecikme
özelliği, tarayıcının animasyonu başlatmadan önce ne kadar bekleyeceğini tanımlar.
animation-duration
özelliğinde olduğu gibi bu da zaman değeri alır.
animation-duration
işlevinin aksine, animation-delay
öğesini negatif olarak tanımlayabilirsiniz
değerini alır. Bu, animasyonun
önceliklendirebilirsiniz. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve
animation-delay
ile -5s
arasında, animasyon videonuzun yarısından başlayarak
önceliklendirebilirsiniz.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state
özelliği, animasyonu oynatmanızı ve duraklatmanızı sağlar.
Varsayılan değer running
değeridir. Bunu paused
olarak ayarlarsanız animasyon duraklatılır.
animation-fill-mode
animation-fill-mode
özelliği, @keyframes
zaman çizelgenizdeki hangi değerlerin
başladığını veya bittiğinin
farkındadır. none
, varsayılan değerdir.
Animasyon tamamlandığında zaman çizelgenizdeki değerler silinir.
Diğer seçenekler şunlardır:
forwards
: Son animasyon karesi, animasyon yönüne göre devam eder.backwards
: İlk animasyon karesi, animasyon yönüne göre devam eder.both
: Hem ilk hem de son animasyon kareleri korunur.
animation
sloganı
Her bir özelliği ayrı ayrı tanımlamak yerine,
animation
kısayolunu kullanarak animasyon özelliklerini
şu sıra:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Animasyonlarla çalışırken dikkat edilmesi gereken noktalar
Kullanıcılar işletim sistemlerini daha az hareket tercih edecek şekilde ayarlayabilir etkileşime geçtiğini gözlemleyeceksiniz. Bu tercihi tespit edebilirsiniz prefers-redued-motion (küçültülmüş hareket) ortam sorgusu:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Bu, animasyonsuz bir tercih değildir. Daha ucuza tercih ediliyor. özellikle de beklenmedik animasyonlar. Web sitemiz g.co/newsinitiative/labs üzerinden ve genel performansı hakkında animasyon rehberini inceleyin.
Öğrendiklerinizi sınayın
Animasyonlar hakkındaki bilginizi test edin
@keyframes
animasyonunun adı veya özel tanımlayıcısı büyük/küçük harfe duyarlı mıdır?
from
ve to
anahtar kelimeleri şuna benzer:
start
ve end
.0
ve 1
0%
ve 100%
.animation-timing-function
ayrıca şu şekilde de bilinir:
@keyframes
animasyonu içinde bulunması gereken minimum animasyon karesi sayısı kaçtır?