CSS Animations Nedir?

Sözde sınıf :hover yıllardır ilkel animasyonlar oluşturmak için kullanılırken, CSS'nin animasyon alanına genişletilmesi Şubat 2009'da CSS aracılığıyla animasyon uygulandığını duyurdu.

CSS Animasyon özelliği , web sayfasında animasyon oluşturmak için kullanılır. Flash ve JavaScript tarafından oluşturulan animasyonun yerine kullanılabilir.

CSS animasyon özelliği, öğelerin bir özellik kümesinden diğerine geçişini sağlamak içindir. CSS ile elementleri düzgün bir şekilde canlandırmak için animasyonun başlangıç ​​ve bitiş durumlarını belirten anahtar kareler belirtmeniz gerekir.

Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:



@Keyframes Kuralı


Keyframes, CSS Animations'ın çalıştığı temellerdir. Animasyonun gösterimini tüm süresinin ilgili aşamalarında tanımlarlar.

Temel anlamda animasyon, aşağıdaki kod bloğundaki gibi oluşturuluyor.


@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
	

Yukarıda slidein adında bir animasyon oluşturulmuş, from kısmında başlangıçtaki özellikleri, to kısmında ise en son alacağı hal belirlenmiştir.

Yüzde kullanmak da mümkündür. Yüzde özelliğini kullanarak istediğiniz sayıda stil değişikliği ekleyebilirsiniz.

Aşağıdaki örnek, animasyon % 25 tamamlandığında,% 50 tamamlandığında ve tekrar animasyon % 100 tamamlandığında <div> öğesinin arka plan rengini değiştirir.


@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Aşağıdaki örnek, "example" animasyonunu <div> öğesine bağlar. Animasyon 4 saniye sürecek ve <div> öğesinin arka plan rengini "mavi" den "sarı" ya yavaş yavaş değiştirecektir:

ÖRNEK:


/* Animasyon kod */
@keyframes example {
  from {background-color:blue;}
  to {background-color: yellow;}
}

/* Animasyonu uygulanacak öğe */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ÇIKTI:

Not: Eğer animasyon-duration özellik belirtilmemişse varsayılan değer 0 sn (0 saniye) animasyon, başlar.

Yukarıdaki örnekte, stilin ve arasındaki form ve to anahtar kelimeleri (% 0 (başlangıç) ve %100 (tam bitiş) temsil eder.) değişeceğini belirledik. Yüzde kullanmak da mümkündür. Yüzde özelliğini kullanarak istediğiniz sayıda stil değişikliği ekleyebilirsiniz.

Yüzde kullanmak da mümkündür. Yüzde özelliğini kullanarak istediğiniz sayıda stil değişikliği ekleyebilirsiniz.

Aşağıdaki örnek, animasyon % 25 tamamlandığında, % 50 tamamlandığında ve tekrar animasyon % 100 tamamlandığında <div> öğesinin arka plan rengini değiştirir.


@keyframes example {
  0%   {background-color: orange;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  animation-name: example;
  animation-duration: 4s;
}

Aşağıdaki örnek, animasyon % 25 tamamlandığında, % 50 tamamlandığında ve yine % 100 tamamlandığında <div> öğesinin arka plan rengini ve konumunu değiştirir:


@keyframes example {
  0%   {background-color:DarkOrange;; left:0px; top:0px;}
  25%  {background-color:gold; left:200px; top:0px;}
  50%  {background-color:DodgerBlue; left:200px; top:200px;}
  75%  {background-color:Chartreuse; left:0px; top:200px;}
  100% {background-color:DarkOrange; left:0px; top:0px;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: DarkOrange;
  animation-name: example;
  animation-duration: 4s;
}	

ÇIKTI:


Bir Animasyonu Geciktirme


animation-delay kodu, animasyon başlaması için bir gecikme belirtir.

Aşağıdaki örnekte animasyonu başlatmadan önce 2 saniye gecikme vardır.


div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Negatif değerlere de izin verilir. Negatif değerler kullanılıyorsa, animasyon sanki N saniye oynatılmış gibi başlayacaktır.

Bir Animasyonun Kaç Kez Çalışması gerektiğini Ayarlama


animation-iteration-count kodu animasyon çalışmasının sayısını belirtir.

Aşağıdaki örnek, animasyonu durmadan 3 kez çalıştıracaktır.


div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Aşağıdaki örnekte animasyonun sonsuza kadar devam etmesi için infinite(sonsuz) değeri kullanılmıştır.


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


Animasyonu Ters Yönde veya Alternatif Çevrimlerde Çalıştırma


animation-direction Özelliği belirtir bir animasyon geriye veya alternatif döngülerinde, ileri oynanması gerektiğini belirtir.

Animation-direction özelliği aşağıdaki değerlere sahip olabilir:

Aşağıdaki örnek animasyonu ters yönde (geriye doğru) çalıştıracaktır:


div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
	

Aşağıdaki örnekte, animasyonu önce ileri, sonra geri çalıştırmak için alternate değeri kullanılır.


.box {
    width: 103px;
    height: 130px;
    margin: 50px;
    background: url("/examples/images/ari.png") no-repeat;
    position: relative;
    animation: moveit 2s linear 0s infinite alternate;
}
 
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

ÇIKTI:

Aşağıdaki örnekte, animasyonun önce geriye, sonra ileriye doğru çalışması için alternate-reverse değeri kullanılmıştır.


.box {
    width: 103px;
    height: 130px;
    margin: 50px;
    background: url("/examples/images/ari.png") no-repeat;
    position: relative;
    animation: moveit 2s linear 0s infinite alternate-reverse;
}
 
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

ÇIKTI:


Animasyonun Hız Eğrisini Belirleme


animation-timing-function Özelliği animasyon hız eğrisi belirtir.

Animation-timing-function özelliği aşağıdaki değerlere sahip olabilir:

Aşağıdaki örnek, kullanılabilecek farklı hız eğrilerinden bazılarını gösterir:


div {
  width: 100px;
  height: 50px;
  background-color: orange;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

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

HTML:


<div id="div1">linear</div>>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

ÇIKTI:

linear

ease

ease-in

ease-out

ease-in-out

Animasyon Steno Özelliği(Kısa Yazma Özelliği )


Aşağıdaki örnekte animasyon özelliklerinden altısı kullanılmıştır:


div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Yukarıdaki ile aynı animasyon efekti, shorthand(Kısa) animation özelliği kullanılarak yazılabilir.


div {
  animation: example 5s linear 2s infinite alternate;
}

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

4225

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.