Animasyon, etkileşimli öğeleri vurgulamanın ve tasarımlarınıza ilgi ve eğlence eklemenin harika bir yoludur. Bu modülde, CSS ile animasyon efektlerini nasıl ekleyeceğinizi ve kontrol edeceğinizi öğreneceksiniz.
Bazen arayüzlerde, tıkladıkları bölümle ilgili yararlı bilgiler sağlayan küçük yardımcılar görürsünüz. Bunlar, genellikle bilginin orada olduğunu ve etkileşimde bulunulması gerektiğini size bildirmeden önce yanıp sönen bir animasyona sahiptir. Bu modülde, bu yardımcıları ve diğer animasyonları CSS kullanarak nasıl oluşturacağınız gösterilmektedir.
Animasyon kareleri olan bir animasyon sırası ayarlamak için CSS'yi kullanabilirsiniz. Bu diziler temel, tek durumlu animasyonlar veya karmaşık, zamana dayalı diziler olabilir.
Animasyon karesi nedir?
Çoğu animasyon aracında, animasyon kareleri bir zaman çizelgesindeki zaman damgalarına animasyon durumları atamak için kullandığınız mekanizmadır.
Örneğin, yanıp sönen "yardımcı" noktayla ilgili zaman çizelgesini burada görebilirsiniz. Animasyon 1 saniye sürer ve 2 durum içerir.
Bu animasyon durumlarının her birinin başladığı ve bittiği belirli bir nokta vardır. Bunları animasyon kareleri ile zaman çizelgesinde eşliyorsunuz.
@keyframes
CSS @keyframes
animasyon animasyon kareleri ile aynı kavrama dayanır.
Aşağıda, iki durum içeren bir örnek verilmiştir:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
İlk önemli parça, animasyon kareleri kuralının adı olan özel tanımlayıcıdır (custom-ident
). Bu örnekteki tanımlayıcı my-animation
.
Özel tanımlayıcı, bir işlev adı gibi çalışarak CSS kodunuzun başka bir yerinde animasyon kareleri kuralına referans verebilmenizi sağlar.
Animasyon kareleri kuralının içinde from
ve to
, animasyonun başlangıcı ve sonu olan 0%
ve 100%
'yi temsil eden anahtar kelimelerdir.
Aynı kuralı şu şekilde yeniden oluşturabilirsiniz:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Zaman aralığı içinde istediğiniz kadar konum ekleyebilirsiniz. Yanıp sönen yardımcı örnekte, iki animasyon karesine dönüşen iki durum vardır. Diğer bir deyişle, animasyon kareleri kuralınızın içinde bu animasyon karelerinin her birinde yapılan değişiklikleri temsil etmek için iki konum bulunur.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
özellikleri
@keyframes
öğenizi bir CSS kuralında kullanmak için çeşitli animasyon özelliklerini ayrı ayrı tanımlayabilir veya animation
kısayol özelliğini kullanabilirsiniz.
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration özelliği, @keyframes
zaman çizelgesinin ne kadar süre boyunca zaman değeri olarak olması gerektiğini tanımlar.
Varsayılan olarak 0 saniye değerine ayarlanır. Bu, animasyonun çalışmaya devam edeceği anlamına gelir
ancak animasyonu göremeyeceğiniz kadar hızlıdır. Negatif zaman değerleri kullanamazsınız.
animation-timing-function
Animasyonda doğal hareketin yeniden oluşturulmasına yardımcı olmak için animasyonun her bir noktada hızını hesaplayan zamanlama işlevlerini kullanabilirsiniz. Hesaplanan değerler genellikle kavisli olur. Bu da animasyonun animation-duration
boyunca değişken hızlarda çalışmasına neden olur ve tarayıcı @keyframes
içinde tanımlanandan daha fazla bir değer hesaplarsa öğenin zıplıyormuş gibi görünmesini sağlar.
CSS'de hazır ayar olarak animation-timing-function için değer olarak kullanılan birkaç anahtar kelime vardır:
linear
, ease
, ease-in
, ease-out
, ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Yumuşak geçiş, hızı modellemek için kullanılan bir işlev türü olan Bézier eğrisi kullanılarak hesaplandığından, yumuşak geçiş işlevi değerleri eğri görünür. ease
gibi zamanlama işlevi anahtar kelimelerinin her biri, önceden tanımlanmış bir Bézier eğrisine referans verir. CSS'de, dört sayı değerini kabul eden cubic-bezier()
işlevini kullanarak doğrudan bir Bézier eğrisi tanımlayabilirsiniz: x1
, y1
, x2
, y2
.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Bu değerler, X ve Y eksenleri boyunca eğrinin her bir bölümünü çizer.
Bézier eğrilerini anlamak karmaşık bir süreçtir. Lea Verou'nun jeneratörü gibi görsel araçlar çok faydalı oluyor.
steps
yumuşak geçiş işlevi
Bazen bir eğri boyunca ilerlemek yerine aralıklar içinde hareket ederek animasyonunuzu daha ayrıntılı bir şekilde kontrol etmek isteyebilirsiniz. steps()
yumuşak geçiş işlevi, zaman çizelgesini eşit sürede tanımlanmış aralıklara bölebilmenizi sağlar.
.my-element {
animation-timing-function: steps(10, end);
}
İlk bağımsız değişken sayıdır. Adımlarla aynı sayıda animasyon karesi varsa her bir animasyon karesi, durumlar arasında geçiş olmadan adımın tam süresi boyunca sırayla oynatılır. Adımlardan daha az animasyon karesi varsa tarayıcı, ikinci bağımsız değişkene bağlı olarak animasyon kareleri arasına adımlar ekler.
İkinci bağımsız değişken yöndür. Varsayılan değer olan end
değerine ayarlanırsa adımlar zaman çizelgenizin sonunda biter. start
değerine ayarlanırsa animasyonunuzun ilk adımı başlar başlamaz tamamlanır, yani end
adımından bir adım önce sona erer.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count özelliği, @keyframes
zaman çizelgesinin animasyon sırasında kaç kez çalışması gerektiğini tanımlar. Varsayılan olarak 1 değeri, animasyonun zaman çizelgenizin sonuna ulaştığında duracağı anlamına gelir. Bu değer negatif bir sayı olamaz.
Animasyonunuzu döngüye sokmak için yineleme sayısını infinite
olarak ayarlayın. Dersin başlangıcından itibaren yanıp sönen animasyon bu şekilde çalışır.
animation-direction
.my-element {
animation-direction: reverse;
}
Aşağıdaki değerleri alan animation-direction'ı kullanarak zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde çalışacağını ayarlayabilirsiniz:
normal
: Yönlendirilen varsayılan değerdir.reverse
: Zaman çizelgenizde geriye doğru çalışır.alternate
: Her animasyon yinelemesi için zaman çizelgesi, ileri ve geri gitme arasında değişir.alternate-reverse
:alternate
gibidir, ancak animasyon zaman çizelgesi geri giderek başlar.
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay özelliği, tarayıcının animasyonu başlatmadan önce ne kadar bekleyeceğini tanımlar.
animation-duration
özelliğinde olduğu gibi, bu özellik de bir zaman değeri alır.
animation-duration
işlevinin aksine animation-delay
öğesini negatif değer olarak tanımlayabilirsiniz. Bu, animasyonun zaman çizelgenizde karşılık gelen noktada başlamasını sağlar. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve animation-delay
öğesini -5s
olarak ayarlarsanız animasyon, zaman çizelgenizin ortasından başlar.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state özelliği, animasyonu oynatmanıza ve duraklatmanıza olanak tanır.
Varsayılan değer running
değeridir. paused
değerine ayarlarsanız animasyon duraklatılır.
animation-fill-mode
animation-fill-mode özelliği, @keyframes
zaman çizelgenizdeki hangi değerlerin animasyon başlamadan önce veya sona erdikten sonra devam edeceğini tanımlar. Varsayılan değer none
, yani animasyon tamamlandığında zaman çizelgenizdeki değerler silinir.
Diğer seçenekler şunlardır:
forwards
: Son animasyon karesi, animasyonun yönüne göre sabit kalır.backwards
: İlk animasyon karesi, animasyonun yönüne göre kalır.both
: Hem ilk hem de son animasyon kareleri korunur.
animation
kısaltması
Her bir özelliği ayrı olarak tanımlamak yerine, animasyon özelliklerini aşağıdaki sırayla tanımlamanıza olanak tanıyan bir animation
kısaltması ile tanımlayabilirsiniz:
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;
}
Animasyonla çalışırken dikkat edilmesi gereken noktalar
Kullanıcılar, işletim sistemlerini uygulamalar ve web siteleriyle etkileşimde bulunurken az hareket edecek şekilde ayarlayabilir. Bu tercihi, prefers-reduced-motion medya sorgusunu kullanarak tespit edebilirsiniz:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Bu, animasyon olmaması için yapılan bir tercih değildir. Daha az animasyon, özellikle de daha az beklenmedik animasyon tercih edilir. Bu tercih ve genel performans hakkında daha fazla bilgiyi animasyon kılavuzumuzda bulabilirsiniz.
Öğrendiklerinizi sınayın
Animasyonlarla ilgili bilginizi test edin
@keyframes
animasyonunun adı veya özel tanımlayıcısı büyük/küçük harfe duyarlı mıdır?
SWOOP
ve swoop
öğelerinin birlikte var olmasına izin verir.from
ve to
anahtar kelimeleri şu şekilde aynı:
start
ve end
.0%
ve 100%
.from
değeri 0%
ile aynı; to
değeri %100 ile aynı.0
ve 1
animation-timing-function
, yaygın olarak şu şekilde de bilinir:
@keyframes
animasyonu için gereken minimum animasyon karesi sayısı nedir?