CSS Animasyonları
CSS Animasyonları
CSS, JavaScript veya Flash kullanmadan HTML öğelerinin canlandırılmasına izin verir!
Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Animasyonlar için Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
CSS Animasyonları nedir?
Animasyon, bir öğenin kademeli olarak bir stilden diğerine değişmesine izin verir.
İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.
CSS animasyonunu kullanmak için önce animasyon için bazı ana kareler belirtmelisiniz.
Anahtar kareler, öğenin belirli zamanlarda hangi stillere sahip olacağını tutar.
@keyframes Kuralı
Kural içinde CSS stillerini belirlediğinizde @keyframes
, animasyon belirli zamanlarda kademeli olarak mevcut stilden yeni stile değişecektir.
Bir animasyonun çalışması için animasyonu bir öğeye bağlamanız gerekir.
Aşağıdaki örnek, "example" animasyonunu <div> öğesine bağlar. Animasyon 4 saniye sürecek ve <div> öğesinin arka plan rengini kademeli olarak "kırmızı"dan "sarı"ya değiştirecektir:
Örnek
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Not: Özellik animation-duration, bir animasyonun tamamlanmasının ne kadar süreceğini tanımlar. Özellik belirtilmezse animation-duration, varsayılan değer 0s (0 saniye) olduğundan hiçbir animasyon oluşmaz.
Yukarıdaki örnekte, "from" ve "to" anahtar sözcüklerini kullanarak stilin ne zaman değişeceğini belirledik (%0 (başlangıç) ve %100 (tamamlandı) anlamına gelir).
Yüzde kullanmak da mümkündür. Yüzde kullanarak istediğiniz kadar stil değişikliği ekleyebilirsiniz.
Aşağıdaki örnek, animasyon %25 tamamlandığında, %50 tamamlandığında ve animasyon %100 tamamlandığında <div> öğesinin arka plan rengini değiştirir:
Örnek
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Aşağıdaki örnek, animasyon %25 tamamlandığında, %50 tamamlandığında ve animasyon %100 tamamlandığında hem arka plan rengini hem de <div> öğesinin konumunu değiştirecektir:
Örnek
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Animasyonu Geciktirme
Özellik animation-delay, bir animasyonun başlaması için bir gecikme belirtir.
Aşağıdaki örnek, animasyonu başlatmadan önce 2 saniyelik bir gecikmeye sahiptir:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Negatif değerlere de izin verilir. Negatif değerler kullanılıyorsa, animasyon zaten N saniyedir oynatılıyormuş gibi başlayacaktır.
Aşağıdaki örnekte, animasyon zaten 2 saniyedir oynatılıyormuş gibi başlayacaktır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Bir Animasyonun Kaç Kez Çalıştırılacağını Ayarlayın
Özellik animation-iteration-count, bir animasyonun kaç kez çalıştırılacağını belirtir.
Aşağıdaki örnek, animasyonu durmadan önce 3 kez çalıştıracaktır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Aşağıdaki örnek, animasyonun sonsuza kadar devam etmesini sağlamak için "infinite" değerini kullanır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Animasyonu Ters Yönde veya Alternatif Döngülerde Çalıştırın
Özellik , animation-directionbir animasyonun ileri mi, geri mi yoksa alternatif döngülerde mi oynatılacağını belirtir.
animasyon-yön özelliği aşağıdaki değerlere sahip olabilir:
normal- Animasyon normal (ileri) olarak oynatılır. Bu varsayılanreverse- Animasyon ters yönde oynatılır (geriye doğru)alternate- Animasyon önce ileri, sonra geri oynatılıralternate-reverse- Animasyon önce geriye, sonra ileriye oynatılır
Aşağıdaki örnek, animasyonu ters yönde (geriye doğru) çalıştıracaktır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
Aşağıdaki örnek, animasyonun önce ileri, sonra geriye doğru çalışmasını sağlamak için "alternate" değerini kullanır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
Aşağıdaki örnek, animasyonun önce geriye, sonra ileriye doğru çalışmasını sağlamak için "alternatif-ters" değerini kullanır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Animasyonun Hız Eğrisini Belirtin
Özellik animation-timing-function, animasyonun hız eğrisini belirtir.
animasyon zamanlama işlevi özelliği aşağıdaki değerlere sahip olabilir:
ease- Yavaş başlayan, sonra hızlı ve sonra yavaş biten bir animasyon belirtir (bu varsayılandır)linear- Baştan sona aynı hızda bir animasyon belirtirease-in- Yavaş başlangıçlı bir animasyon belirtirease-out- Yavaş sonlu bir animasyon belirtirease-in-out- Yavaş başlangıçlı ve bitişli bir animasyon belirtircubic-bezier(n,n,n,n)- Kübik-bezier işlevinde kendi değerlerinizi tanımlamanıza izin verir
Aşağıdaki örnek, kullanılabilecek farklı hız eğrilerinden bazılarını göstermektedir:
Örnek
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
Bir Animasyon İçin Doldurma Modu Belirtin
CSS animasyonları, ilk animasyon karesi oynatılmadan önce veya son animasyon karesi oynatıldıktan sonra bir öğeyi etkilemez. Animasyon doldurma modu özelliği bu davranışı geçersiz kılabilir.
Özellik animation-fill-mode, animasyon oynatılmadığında (başlamadan önce, bittikten sonra veya her ikisi) hedef öğe için bir stil belirtir.
animasyon doldurma modu özelliği aşağıdaki değerlere sahip olabilir:
none- Varsayılan değer. Animasyon, yürütülmeden önce veya sonra öğeye herhangi bir stil uygulamazforwards- Öğe, son ana kare tarafından ayarlanan stil değerlerini korur (animasyon yönüne ve animasyon yineleme sayısına bağlıdır)backwards- Öğe, ilk animasyon karesi tarafından belirlenen stil değerlerini alır (animasyon yönüne bağlıdır) ve bunu animasyon gecikme süresi boyunca korurboth- Animasyon, animasyon özelliklerini her iki yönde genişleterek hem ileri hem de geri için kuralları takip edecektir.
Aşağıdaki örnek, animasyon sona erdiğinde <div> öğesinin son ana karedeki stil değerlerini korumasına izin verir:
Örnek
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Aşağıdaki örnek, <div> öğesinin, animasyon başlamadan önce (animasyon gecikmesi süresi boyunca) ilk ana kare tarafından ayarlanan stil değerlerini almasını sağlar:
Örnek
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Aşağıdaki örnek, <div> öğesinin, animasyon başlamadan önce ilk ana kare tarafından ayarlanan stil değerlerini almasına ve animasyon sona erdiğinde son ana kareden gelen stil değerlerini korumasına olanak tanır:
Örnek
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animasyon Steno Özelliği
Aşağıdaki örnek, altı animasyon özelliğini kullanır:
Örnek
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Yukarıdakiyle aynı animasyon efekti, stenografi
animationözelliği kullanılarak elde edilebilir:
Örnek
div
{
animation: example 5s linear 2s infinite alternate;
}
CSS Animasyon Özellikleri
Aşağıdaki tablo, @keyframes kuralını ve tüm CSS animasyon özelliklerini listeler:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |