CSS3 @keyframes ile Basit Animasyonlar Yapmak

Merhaba arkadaşlar bir önceki CSS3 @keyframes Nedir? Nasıl Kullanılır ? adlı yazımda Keyframes`e giriş yapmıştık bu dersimdede video lu bir şekilde Keyframes ile animasyonlar yapımını anlattım.

Not: Video uzamasın diye ön ek eklemedim siz animation-duration, animation-name ve keyframes kodlarına ön ekleri ekleyiniz.(-moz-, -webkit- vs.)

İpucu: Kutu Divine şu kodu yazarsak animasyon tekrarlar:

animation-iteration-count:infinite;

CSS3 @keyframes ile Basit Animasyonlar Yapmak

Kodlara videonun altından ulaşabilirsiniz, İyi Seyirler.

*{margin:0; padding:0;}
	.kutu{
		width:100px;
		height:50px;
		background:#000;
		color:#fff;
		animation-name:kutu;
		animation-duration:2s;
	}
		
	@keyframes kutu{
		from{background:red;width:150px}
		to{background:green; width:300px;}
	}

*{margin:0; padding:0;}

.kutu{

width:100px;

height:50px;

background:#000;

color:#fff;

animation-name:kutu;

animation-duration:2s;

}

@keyframes kutu{

from{background:red;width:150px}

to{background:green; width:300px;}

}

<div class="kutu">Bu bir deneme yazıdır.</div>

1	<div class="kutu">Bu bir deneme yazıdır.</div>