CSS3 Animasyon Kullanımı

CSS3 Animasyon Kullanımı

CSS3 Animasyon Kullanımı : Html nesnelere CSS ile daha doğrusu yeni çıkmış CSS3 versiyonu ile hareket katma işlemi yapılmaktadır. Bu hareketlerin tümünü dilediğiniz şekillere verebilir ve şekillere animasyon geçişlerinde renklendirme yapabilirsiniz. CSS3 Animasyon kullanımı oldukça zevkli ve bir o kadar da kolaydır. Sizlerle beraber renk değiştirme, nesneleri hareket ettirme ve nesnelerin nasıl pozisyon alabileceğini örnekli bir şekilde göstereceğim.

CSS3 Animasyon özelliklerine neden ihtiyaç duyulduğunu sorduğunuzu duyar gibiyim. Bunu da sizlere kısaca açıklamak istiyorum. Hızla gelişen Web dünyasında animasyon programları da git gide kullanılmaz hal almıştır. Daha önceden herkesin animasyon için kullandığı ve bildiği Flash programı tarayıcıların desteklemeyeceği bir hale geldi. Bunun da sebebi, çok yüksek boyutlarda olduğu için sunucuları çok yormaktaydı.

Buna çözüm olarak Html ve CSS3 içinde işlemleri halletmeye karar verdiler ve bunun için artık neredeyse tüm işlemleri başka bir programa bağlı kalmadan sorunsuz bir şekilde hallediyoruz.

CSS3 Animasyon Örnekleri

Animasyon örneklerini genel olarak kullanılan animasyonlardan seçmeye çalıştım. Bu yaptığım örnekleri projenizin tüm alanlarında özgürce kullanabilirsiniz.

CSS3 Renk Değiştirme Animasyonu

Html içindeki Div nesnesinin üzerine gelince arka plan rengini animastion parametresi ile değiştirdik.

div {
	background-color: #000;
}
div:hover {
	background-color: #333;
	animation: color_change 1s;
}

CSS3 Arkaplan Rengi Otomatik Değişmesi

Css3 Animasyon özelliği ile rengin sürekli kırmızı ve mavi olarak otomatik değişmesi.

@-webkit-keyframes color_change {
  from { background-color: blue; }
  to { background-color: red; }
}
@-moz-keyframes color_change {
  from { background-color: blue; }
  to { background-color: red; }
}
@-ms-keyframes color_change {
  from { background-color: blue; }
  to { background-color: red; }
}
@-o-keyframes color_change {
  from { background-color: blue; }
  to { background-color: red; }
}
@keyframes color_change {
  from { background-color: blue; }
  to { background-color: red; }
}

div {
	background-color: blue;
	border: 5px solid white;
	border-radius: 50px;
	width: 50px;
	height: 50px;
   -webkit-animation: color_change 1s infinite alternate;
   -moz-animation: color_change 1s infinite alternate;  
   -ms-animation: color_change 1s infinite alternate;  
   -o-animation: color_change 1s infinite alternate;  
   animation: color_change 1s infinite alternate;   
}

CSS3 Hareket Ettirme Animasyonu

Html nesnenin otomatik olarak istediğiniz bölgelerde hareket etmesini sağlayan koddur.

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-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;}
}

/* Standard syntax */
@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;}
}

CSS3 Animasyon Nedir?

Html nesneleri bir yönden belirli bir yöne hareket ettirmek veya nesnelerin renklerini veya her hangi bir özelliğini değiştirmek için kullanılmaktadır. Bunun da ana sebebi başka bir programa bağlı kalmadan her şeyi tek bir alan için de yönetmektir.

CSS3 Animasyon Avantajları Nelerdir?

Css3 Animasyon avantajlarının genel olarak ne olduğuna bakacak olursak bununla alakalı sizlere bir liste hazırladım ve sizinle bu listeyi paylaşıyorum.

• Animasyonların hızlı çalışması
• Animasyon kodlarının karmaşık olmaması
• Arama motorları tarafından her hangi bir sorun teşkil etmemesi
• Animasyon çalışırken işlemler yapılabilmesi
• Animasyon nesnesine renk, boyut ve pozisyon bilgisinin girilebilmesi
• Her hangi bir programa ihtiyaç duyulmadan doğrudan HTML ve CSS kodları ile animasyon yapılması

CSS3 animasyon avantajları genel olarak bu şekildedir. Projenize bağlı olarak da bu avantajlar artabilir veya azalabilir.