css3 animasyon yapımı

Css3 animasyon yapımı / Animation Css

Bu dersimizde Css 3 ile gelen animasyon yapımına değineceğiz. Eskiden css teknolojisi bu kadar gelişmemişken, animasyonlar genelde flashlar ile hazırlanırdı 🙂 2008 Dönemlerinde web sitelerimiz daha kaliteli görünsün diye kullanmadığımız flash programları neredeyse yoktu. Son yıllarda flash kullanımı neredeyse tarih oldu diyebiliriz. Sebebine gelirsek, işletim sistemlerini aşırı yorması bir kenara dursun, apple’ın ürünlerinde flash içeriklere izin verilmeyişi en büyük etkenlerden birisi oldu sanırım. Şuan günümüz kodlama teknolojilerinde animasyon yapımı dediğimiz zaman akıllara javaScript veya jQuery gelse de, css de bize bu konuda oldukça fayda sağlamakta. Lafı daha fazla uzatmadan hemen kodlamaya başlayalım.

Animasyon oluştururken ilk olarak animasyon özelliklerinin ne işe yaradıklarından başlayalım;

@keyframes: Tüm animasyon ayarlarının yapıldığı ve css3 animasyon kodlarının yazıldığı css blogu.
animation: Alttaki özelliklerin tümünün tek satırda kullanılmasına yarayan css blogu .
animation-name: keyframes animasyon adını belirtir:
animation-duration: Bir animasyonun döngüsünü sağlaması için süre belirtilir.
animation-delay: Bir animasyonun başlaması için bir gecikme belirtir.
animation-direction: bir animasyon ters yönde veya alternatif döngülerinde oynaması gerektiğini belirtir.
animation-iteration-count: Animasyonun kaç kere tekrar etmesi gerektiğini belirtir.
animation-timing-function: Animasyonun akış hızını ve şeklini belirtir.

 


Şimdi hepsini teker teker deneyerek, dersimizin daha da  verimli ve açıklayıcı olmasını sağlayalım.

İlk olarak  başlangıç kodlarımızı yazalım;

<style type="text/css">
div {
	width:500px;
	height:60px;
	color:#fff;
	background:#000;
	border:1px solid #e1e1e1;
	text-align:center;
	}	
</style>
 
<body>
 
<div>
	<p>Webbulutu.net  Css3  animasyon yapımına  giriş.</p>
</div>

Yukarda  animasyon  özellikleri henüz yazılmamış tatlı mı tatlı, şirin mi şirin bir divimiz var ve animasyonlarımız ile çıldırmayı bekliyor adeta .

@keyframes özelliği ile  kendi animasyonumuzu yazmaya  başlayalım;

@keyframes webbulutu {
	from {
		background:#093;
		}
	to {
		background:#009;
		}
	}

Keyframes adına türkçe karakter kullanmadan istediğinizi yazabilirsiniz ben “webbulutu” adını verdim. İçerisine başlangıç “from” ve bitiş “to” özellikleri ile, animasyonun başlangıç ve bitiş özelliğini belirtmiş olduk. Eğer birden fazla animasyonlar ekleyerek parçalar halinde çalışmak isterseniz aşağıdaki şekilde de kullanabilirsiniz.

@keyframes webbulutu {
	50% {
		background:#093;
		}
	75% {
		background:#f00;
		}
	100% {
		background:#009;
		}
	}

Şuan bizim yaptığımız bir animasyon blogu hazırlamak oldu, sıra geldi bunu istediğimiz yerde kullanmaya. Biz divimizde kullanacağımız için div css bloguna alttaki işlemleri uyguluyoruz.

div {
	width:500px;
	height:60px;
	color:#fff;
	background:#000;
	border:1px solid #e1e1e1;
	text-align:center;
	animation-name: webbulutu; /*oluşturduğumuz  animasyon adı*/
	animation-delay: 1s; /*animasyonun başlama  süresi */
	animation-duration: 3s; /* animasyon tamamlandıktan sonra  eski haline  gelmesi için gereken süre*/
	animation-iteration-count: 3; /*animasyonun  3 defa tekrar edeceğini belirdir. "infinite" ile sınırsız tekrar eder.*/
	animation-direction: reverse; /*animasyonun ters yönde  çalışmasını sağladık*/
	/*animation-direction: alternate; animasyonu ilk ileri, sonra  geri, sonra ileri çalışacak şekilde  bir döngüye sokar.*/
	animation-timing-function: linear; /*animasyon akış hızını ve akış şeklini belirler*/
	}

Yukarda gördüğünüz gibi animation-name ile oluşturduğumuz animasyonu tanımladık ve diğer özellikleri kullandık. konunun en başında bu özelliklerin ne işe yaradıklarını yazmıştım, istediğiniz özellikleri bu şekilde kullanabilirsiniz.

Son olarak basit kullanım şekli ise şöyledir;

div {
	width:500px;
	height:60px;
	color:#fff;
	background:#000;
	border:1px solid #e1e1e1;
	text-align:center;
	animation: webbulutu 3s linear 1s infinite alternate;
	}

Animasyonun son hali şu şekildedir.

See the Pen css3 animation by Bulut (@bulutaylak) on CodePen.

Bir başka blog yazımda görüşmek üzere 🙂

web bulutu

bulut Aylak

Full-stack web developer, Search engine optimization meraklısı, çakma filozof ve blogger.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir