CSS3 Animasyonlar
CSS3 animasyonlar JavaScript veya Flash kullanmadan en HTML öğelerinin animasyon sağlar!
Animasyon
Animasyonlar için Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS3 animasyonlar nelerdir?
Bir animasyon unsuru giderek başka bir tarzı değiştirmenizi sağlar.
İstediğiniz gibi birçok CSS özellikleri, istediğiniz kadar defalarca değiştirebilir.
CSS3 animasyon kullanmak için öncelikle animasyon için bazı kareleri belirtmelidir.
Ana kareler eleman belirli zamanlarda ne olacak stilleri tutun.
@keyframes Kural
İçinde CSS stillerini belirtirken @keyframes kural, animasyon kademeli olarak belirli zamanlarda yeni stiline geçerli stilinden değişecektir.
işe bir animasyon elde etmek için, bir öğeye animasyon bağlamak gerekir.
Aşağıdaki örnek, bağlanan "example" animasyon <div> elemanı. Animasyon irade 4 saniye sürer ve yavaş yavaş arka plan-rengi değişir <div> dan eleman "red" için "yellow" :
Ö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;
}
Kendin dene " Note: Eğer animation-duration mülkiyet belirtilmemişse varsayılan değer 0'dır, çünkü, animasyon, hiçbir etkisi olmayacaktır.
Biz stil anahtar kelimeler kullanarak değişecek zaman belirttiğiniz Yukarıdaki örnekte "from" ve "to" (which represents 0% (start) ve% 100 (complete) ).
Yüzde kullanmak da mümkündür. istediğiniz gibi yüzde kullanarak, gibi birçok stil değişiklikleri ekleyebilirsiniz.
Aşağıdaki örnek, arka plan-renk değiştirecek <div> animasyon% 100 tamamlandığında yeniden canlandırma% 50 tam% 25 tamamlandığında elemanı ve:
Ö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;
} Kendin dene " Aşağıdaki örnek, arka-renk ve pozisyonunu hem de değişecektir <div> animasyon% 100 tamamlandığında yeniden canlandırma% 50 tam% 25 tamamlandığında elemanı ve:
Ö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;
} Kendin dene " Bir Animasyon ertele
animation-delay özelliği bir animasyon başlaması için bir gecikme belirtir.
Aşağıdaki örnek, animasyon başlamadan önce 2 saniye gecikme var
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Kendin dene " Bir Animasyon Run Should Kaç Kez Set
animation-iteration-count özelliği bir animasyon çalışması gerektiğini sayısını belirtir.
durana önce aşağıdaki örnek animasyonu 3 kez yayınlanır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Kendin dene " Aşağıdaki örnek "değeri kullanır infinite animasyon sonsuza dek devam yapmak":
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Kendin dene " Ters Yön veya Alternatif Çevrimleri'nde Animasyon çalıştırın
animation-direction özelliği ters yönde veya alternatif döngülerinde bir animasyon çalışmasına izin için kullanılır.
Aşağıdaki örnek, ters yönde animasyon çalışır:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Kendin dene " Aşağıdaki örnek değer kullanır "alternate" animasyon ilk öne, daha sonra geri sonra, ileri çalıştırmak için:
Örnek
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Kendin dene " Animasyon Hızı Eğrisi belirtin
animation-timing-function özelliği animasyon hız eğrisi belirtir.
Animasyon-zamanlama fonksiyonlu özelliği, aşağıdaki değerlere sahip olabilir:
-
ease- yavaş bir başlangıç ile bir animasyon belirtir, ardından hızlı, daha sonra yavaş yavaş sona (this is default) -
linear- baştan sona aynı hızda bir animasyon belirtir -
ease-in- yavaş bir başlangıç ile bir animasyon belirtir -
ease-out- yavaş bir ucu ile bir animasyon belirtir -
ease-in-out- yavaş bir başlangıç ve sonu ile bir animasyon belirtir -
cubic- bezier(n,n,n,n)- Bir kübik bezier işlevinde kendi değerlerinizi tanımlamanızı sağlar
Aşağıdaki örnek, kullanılabilen farklı hız eğrilerinin 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;} Kendin dene " Animasyon Shorthand Mülkiyet
Aşağıdaki örnek, animasyon özellikleri altı kullanır:
Örnek
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Kendin dene " Yukarıdaki kestirme kullanılarak elde edilebilir, aynı animasyon etkisi animation özelliği:
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»
CSS3 Animasyon Özellikleri
Aşağıdaki tabloda @keyframes kural ve tüm animasyon özelliklerini:
| özellik | Açıklama |
|---|---|
| @keyframes | animasyon kodunu belirtir |
| animation | tüm animasyon özelliklerini ayarlamak için bir stenografi özelliği |
| animation-delay | Bir animasyonun başlaması için bir gecikme belirtir |
| animation-direction | bir animasyon ters yönde veya alternatif döngülerinde oynamak olup olmadığını belirler |
| animation-duration | animasyon bir döngüsünü tamamlamak için kaç saniye veya milisaniye belirtir |
| animation-fill-mode | Animasyon oynarken değilken öğe için bir stil belirtir (when it is finished, or when it has a delay) |
| animation-iteration-count | Bir animasyon oynanması gerektiğini sayısını belirtir |
| animation-name | @keyframes animasyonun adını belirtir |
| animation-play-state | animasyon çalışıyor veya duraklatılmış olduğunu belirtir |
| animation-timing-function | animasyon hız eğrisi belirtir |