CSS ANİMASYON OLUŞTURMA

Merhaba..

CSS ile animasyonlar hazırlayabiliyoruz.. Tasarım içerisinde kullanılabilen basit buton animasyonları yapılabildiği gibi, daha gelişmiş animasyonlarda hazırlanabiliyor..

ANİMASYONLARIN OLUŞTURULMASI (KEYFRAMES)

CSS ile animasyon hazırlanırken @KEYFRAMES metodundan yararlanıyoruz.. Keyframes, anahtar kareler anlamına gelir.  Animasyon süresi içerisinde her an bir karedir.  Keyframes ile ismi belirtilen animasyon içerisinde tüm CSS özellikkeri değiştirilebilir..

Animasyon içeriği (animasyonda olacak değişimler de diyebiliriz) iki şekilde oluşturulabilir;

•   "FROM - TO" :  İlk ve son değerler beliritlerek, 
•   "YÜZDELİK SÜRE"  : Animasyon süresinin yüzdelik dilimleri belirtilerek. 

Yüzdelik dilimler ile yapılan animasyon içerikleri , daha esnek ve daha gelişmiş animasyonlar oluşturulmasını sağlar..  0 - 100 arasında istenildiği kadar ara kare (animasyon an'ı) belirtilebilir..

Her iki yapıdada, animasyon uygulanacak elemanın alacağı CSS özellikleri belirtilir. Örneğin arkaplan rengi başta kırmızı iken , sarıya dönüşmesi , sol konumlandırması başta  0 iken , 100% sağa gitmesi , şekil değişiklikleri vs gibi..

CSS

@keyframes hareket {   
   from  {margin-left:0; }
   to {margin-left: 200px }
}

/* yada */

@keyframes hareket  {   
   0% {margin-left:0; }
   100% {margin-left: 200px }
}

Yukarıda, ilk durumda 0 olan margin-left değeri, son durumda 200px olacaktır. Ekranda , aşağıda belirtilecek animasyon süresinde eleman soldan 200px sağa kayacaktır..

Animasyonların ekranda görünebilmesi için mutlaka bir elemana animasyon özelliklerinin  verilmiş olması gerekir..

ANİMASYON ÖZELLİKLERİ (ANIMATION - X)

Oluşturulan animasyonların , bir elemana verilebilmesi için animate özellikleri kullanılır.. Animasyon adı ve süresinin verilmesi animasyonun canlanması için yeterli olacaktır. 

• animation-name  : Animasyon adı
• animation-duration  : Animasyon süresi
• animation-iteration-count  : Animasyon tekrar sayısı
• animation-delay : Animasyon gecikme süresi
• animation-direction : Animasyon yönü
• animation-timing-function : Animasyonun hız değişimi

CSS  (FROM - TO)

@keyframes hareket {   
   from  {margin-left:0; }
   to {margin-left: 200px }
}

div.hareket{ 
  background-color: orange;
  padding:2rem;
  width:150px;

  animation-name: hareket;   /* animasyon adı */
  animation-duration:2s;  /* animasyon süresi */
  animation-iteration-count : infinite;  /* animasyon tekrar sayısı (sonsuz)*/
}

HTML

<div>HAREKET</div>

EKRAN

Yukarıda renk class'lı  DIV elemanına ,

• "animation-name" özelliği ile "renk" isimli animasyon eklenmiş
• "animation-duration" özelliği ile animasyon süresi 2 saniye olarak belirtilmiş
• "animation-iteration-count" özelliğine verilen  "infinite" değeri ile , animasyonun sürekli tekrar etmesi sağlanmıştır..

Div, margin-left : 0 değerinden , 200px değerine 2 saniyede kaymış olur. . Ancak FROM TO yapısında iki değer belirtebildiğimiz için ,0 dan 200px'e geçişi görebiliyorken, son karede 200px olduktan sonra birden 0px'e (başlangıç değeri)  döndüğü için geçişi göremeyiz. Bunun için, ara değerler ekleyebildiğimiz  yüzdelik dilimlerin kullanılması daha estetik bir görünüm sağlayabilir.

CSS (0% 50% 100%)

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div{ 
  background-color: orange;
  padding:2rem;
  width:150px;

  animation-name: hareket;   /* animasyon adı */
  animation-duration:2s;  /* animasyon süresi */
  animation-iteration-count : infinite;  /* animasyon tekrar sayısı (sonsuz)*/
}

HTML

<div>HAREKET</div>

EKRAN

Yukarıdaki renk animasyonunda başlangıç , orta ve son değerlerini belirtmiş olduk;

• 0%      : Animasyon başlarken  margin-left: 0
• 50%    : Animasyonun tam ortasında margin-left: 200px
• 100%  : Animasyon bitişinde margin-left: 0

Dolayısıyla , div sol margin değeri 0'dan 200px'e  geçerken de , 200px'den 0'a  dönerkende ekranda akışı görebiliriz..

ANIMATION-NAME

Animasyon eklenecek elemana  , hangi animasyonun verileceğini belirler. Bu yapılmadan önce KEYFRAMES ile animasyonun adı belirtilip oluşturulmuş olması gerekir..

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div {  
  animation-name: hareket ;  /* animasyon adı. */
}

ANIMATION-DURATION

Animasyonun ne kadar süreceğini belirler. (s) saniye yada (ms) mili saniye cinsinden belirtilebilir.. Varsayılan değeri 0'dır. Dolayısıyla animasyonun canlanabilmesi için mutlaka verilmesi gerekir. 

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div {  
  animation-name: hareket ;  /* animasyon adı */
  animation-duration: 2s;  /*  animasyon 2s saniye sürer */
}

ANIMATION-ITERATION-COUNT

Animasyonun kaç kez tekrar edeceğini belirler. Varsayılan değeri 1'dir. İstenilen sayı kadar tekrar etmesi sağlanabilirken , "infinite" değeri ile sürekli tekrar etmesi de sağlanabilir..

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div {  
  animation-name: hareket ;  /* Animasyon adı */
  animation-duration: 2s;  /* Animasyon 2s sürer */

  animation-iteration-count: 3; /* animasyon 3 kez tekrarlanır */
  animation-iteration-count: infinite;  /* animasyon sürekli tekrarlanır */

}

ANIMATION-DELAY

Animasyon gecikme süresini belirler. Delay uygulanan animasyonlar, beliritlen süre kadar bekledikten sonra oynatılmaya başlanır..

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div {  
  animation-name: hareket ;  /* Animasyon adı */
  animation-duration: 2s;  /* Animasyon 2s sürer */
  animation-iteration-count: 3; /* animasyon 3 kez tekrarlanır */
  animation-iteration-count: infinite;  /* animasyon sürekli tekrarlanır */

  animation-delay:1s  /* animasyon 1s saniye sonra başlar */
}

ANIMATION-DIRECTION

Animasyonun oluşum yönünü belirler. Animasyonlar normalde keyframes ile baştan sona doğru verilen sürelere göre oluşur. Ancak animation-direction ile oluşum yönü değiştirilebilir..

• normal - Animasyon keyframes ile belirtilen şekilde oynatılır.. (varsayılan)
• reverse - Animasyon ters yönde oynatılır.. (sondan başa) 
• alternate - Başa dönme değeri verilmeyen animasyonların (ftom - to animasyonları) ,  son kareye gelidklerinde, birden bire değil, yine verilen animasyon ile ilk değerine dönmesini sağlar.. Yani aslında animasyon sonuna aynı animasyondan ters çevrilerek bir tane daha eklenmiş gibi olur..
• alternate-reverse - Animasyonu tersten başlatarak alternate işlemini uygular..

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: 200px }
   100%  {margin-left:0; }
}

div {  
  animation-name: hareket ;  /* Animasyon adı */
  animation-duration: 2s;  /* Animasyon 2s sürer */
  animation-iteration-count: 3; /* animasyon 3 kez tekrarlanır */
  animation-iteration-count: infinite;  /* animasyon sürekli tekrarlanır */
  animation-delay:1s;  /* animasyon 1s saniye sonra başlar */

  animation-direction : reverse:  /* animasyon ters yönde oynatılır , (sondan başa) */
}

ANIMATION-TIMING-FUNCTION

Animasyonların hız değişimleri için kullanılır.  Varsayılan değeri "ease" dir  ;  animasyonlar yavaş başlayıp hızlanır ve yavaşlayarak biterler..  Ancak aşağıdaki özellikler ile  animasyonun hız ayarları değiştirlebilir.. 

• ease  : Varsayılan değerdir. Animasyonlar yavaş başlayıp hızlanır ve yavaşlayarak biterler..
• linear : Hızın doğrusal yayılmasıdır. Animasyon baştan sona aynı hızda devam eder..
• ease-in : Animasyon yavaş başlar ve hızlanır..
• ease-out : Animasyon hızlı başlar ve bitişe doğru yavaşlar..
• ease-in-out : Animasyon yavaş başlar ve yavaş biter
• cubic-bezier(n,n,n,n) : Hız ayarının her kare için farklı şekilde ayarlanmasını sağlar..

CSS

@keyframes hareket {   
   0%  {margin-left:0; }
   50% {margin-left: calc(100% - 150px) }
   100%  {margin-left:0; }
}
div {
   padding:2rem!important;
   width:150px;
   background-color: #da3d00 ; 
   animation-name: hareket3;
   animation-duration:4s;
   animation-iteration-count : infinite;

   animation-timing-function : ease;
}
 

EASE

Varsayılan değerdir. Animasyonlar yavaş başlayıp hızlanır ve yavaşlayarak biterler..

"animation-timing-function : ease"

LINEAR

Hızın doğrusal yayılmasıdır. Animasyon baştan sona aynı hızda devam eder..

"animation-timing-function : linear"

EASE-IN

Animasyon yavaş başlar ve hızlanır..

"animation-timing-function : ease-in"

EASE-OUT

Animasyon hızlı başlar ve bitişe doğru yavaşlar..

"animation-timing-function : ease-out"

EASE-IN-OUT

Animasyon yavaş başlar ve yavaş biter.

"animation-timing-function : ease-in-out"

ANIMATION-FILL-MODE

Sürekli tekrarlamayan animasyonlarda, animasyon bitişinde elemanın hangi değerinde duracağını belirler.

• none - Varsayılan değerdir. animasyon akışı dışında , herhangi bir değişiklik yapılmaz.
• forwards - Animasyon son karedeki özelliklerinde durur..
• backwards - Animasyon ilk karedeki özelliklerinde durur..
• both - Animasyon başta ve sonda özelliklerini korur..

ANIMATION KISALTMASI

Animasyon özellikleri "animation" özelliği ile kılatılarak tek satırda yazılabilir.. 

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

Yukarıdaki animasyon özellikleri sırasıyla aşağıdaki gibi tek satırda yazılabilir..

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

Görüşmek üzere...