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
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

@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;
}

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:

• normal Animasyon normal (ileri) olarak oynatılır. Bu varsayılan
• reverse Animasyon ters yönde oynatılır (geriye doÄŸru)
• alternate Animasyon önce ileri, sonra geri oynatılır
• alternate-reverse Animasyon önce geriye, sonra ileriye doÄŸru oynatılır

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:

• ease YavaÅŸ baÅŸlangıç, sonra hızlı, ardından yavaÅŸ biten bir animasyon belirtir (bu varsayılan deÄŸerdir).
• linear BaÅŸtan sona aynı hızda bir animasyon belirler.
• ease-in YavaÅŸ baÅŸlatılan bir animasyonu belirtir.
• ease-out YavaÅŸ sonu olan bir animasyonu belirtir.
• ease-in-out YavaÅŸ baÅŸlangıç ​​ve bitiÅŸli bir animasyonu belirtir.
• cubic-bezier(n,n,n,n) Kübik-bezier fonksiyonunda kendi deÄŸerlerinizi tanımlamanızı saÄŸlar.

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:

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;
}