CSS @keyframes kuralı

Tanım ve Kullanım

@keyframes kuralı ile animasyon oluşturabilirsiniz.

Animasyon oluşturma prensibi, bir CSS stillerini bir diğer stillere kademeli olarak değiştirmektir.

Animasyon süreci boyunca, bu CSS stillerini birden fazla kez değiştirebilirsiniz.

Değişimin gerçekleşme zamanını yüzdelik olarak belirlemek veya "from" ve "to" anahtar kelimeleri ile, 0% ve 100% olarak eşdeğerdir.

0% animasyonun başlangıç zamanı, 100% animasyonun bitiş zamanıdır.

İpucu:En iyi tarayıcı desteği için her zaman 0% ve 100% seçicileri tanımlamanız gerekmektedir.

İpucu:Animasyon görünümünü kontrol etmek ve animasyonu seçici ile bağlamak için animasyon özelliklerini kullanın.

Dikkat:!important kuralı ana karelerde göz ardı edilir (bu sayfanın son örneğine bakın).

Ayrıca bakınız:

CSS3 Eğitimi:CSS3 Animasyon

Örnek

Örnek 1

div elementini dengeli olarak aşağıya doğru hareket ettirmek için:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Kişisel olarak deneyin

Örnek 2

Bir animasyonda çoklu keyframe seçicileri eklemek:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Kişisel olarak deneyin

Örnek 3

Bir animasyonda çoklu CSS stilleri değiştirmek:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Kişisel olarak deneyin

Örnek 4

Çoklu CSS stillerine sahip çoklu keyframe seçicileri:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

Kişisel olarak deneyin

Örnek 5

Dikkat:!important kuralı, anahtar karelerde yoksayıldı:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Yoksayıldı */
  to   {top: 200px;}
}

Kişisel olarak deneyin

CSS dilbilgisi

@keyframes animationname {keyframes-selector {css-styles;}}

Özellik değeri

Değer Açıklama
animationname Gerekli. Animasyonun adını tanımlar.
keyframes-selector

Gerekli. Animasyon süresinin yüzdesi.

Geçerli değerler:

  • 0-100%
  • from（0% ile aynı）
  • to（100% ile aynı）
css-styles Gerekli. Bir veya daha fazla geçerli CSS stil özelliği.

Tarayıcı desteği

Chrome IE / Edge Firefox Safari Opera
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-