Animation Özelliği

animation özelliği, animasyon için kısa yazım özelliğidir, animasyon için tüm özellikleri aynı anda ayarlamanıza olanak tanır: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Değerlerin sırası önemli değildir, animasyonun çalışma süresi animation-duration mutlaka gecikme animation-delay öncesinde gelmelidir. Sadece animation-name ve animation-duration özellikleri zorunludur.

Özellik ayrıca none değerini de alabilir, bu değer animasyonu tamamen devre dışı bırakır. Bu değer varsayılan değerdir.

Sözdizimi

seçici {
	animation: değerler;
}

Örnek

Bu örnekte, animasyondan önce (her yeni oynatma öncesinde) 3 saniyelik bir gecikme olacak, ardından animasyon 6 saniye boyunca oynatılacak:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . Olası Sorunlar

Kısa formda yazılan bir animasyon, adından dolayı çalışmayabilir. Şu animasyonu inceleyelim:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Dikkat edin, animasyonun adı olarak reverse kullanıyorum. İlk bakışta her şey iyi görünüyor, ancak animasyon çalışmıyor, çünkü reverse, animation-direction özelliği için geçerli bir anahtar kelimedir.

Ayrıca, kısa formda kullanıldığında animasyon, adında diğer anahtar kelimeler olduğunda da çalışmayacaktır. Ancak "tam" form kullanıldığında her şey iyi çalışır.

Animasyonları bozan anahtar kelime-değerler arasında, animation-direction özelliğine ait anahtar kelimelerin yanı sıra, geçiş işlevleriyle ilgili anahtar kelimeler ve infinite, alternate, running, paused vb. değerler de bulunur.

Ayrıca Bakınız

animasyonun karelerini tanımlayan @keyframes komutu
bir öğenin üzerine gelindiğinde gerçekleşen animasyonu temsil eden yumuşak geçişler transition