Css Transitions ve Animation

Merhaba dostlar, bu dersimizde Css ile Transitions ve Animation özelliklerini öğreneceğiz. Anlaşılması biraz zor olabilir ama oldukça zevkli bir konudur. Şimdi dilerseniz ilk özelliğimiz olan Transitions ile başlayalım.

Css Transitions – Geçişler

Css Transition geçiş efekti yapmak için kullanılır. Özelliğimiz iki parametre alır, bunlar; geçiş efekti ve tepki süresi. Tansition da aşağıda yer alan özellikleri inceleyeceğiz.

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Şimdi dilerseniz basit bir örnek yapalım. Aşağıdaki kodu inceleyelim.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Yukarıda ki örneğimiz Mouse div’imizin üzerine geldiğinde 2sn içerisinde width değeri 300px olacaktır.

Css Transition Hız Eğrisi Tanımlama

Geçiş efektimize hız eğrisi ekleyebiliriz. Aşağıda yer alan kodu inceleyerek daha iyi anlayalım.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

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

div:hover {
  width: 300px;
}

Css Transition Geciktirme – Delay

Delay geçişlerimize geciktirme uygulamak için kullanılır. Aşağıdaki örnek kodumuzu inceleyelim.

div {
  transition: width 2s, height 2s, transform 2s;
}

Başka bir örnek

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Şimdi diğer bir konu başlığımız olan animasyonlara geçelim.

Css Animation – Animasyonlar

Css animasyon işlemlerini aşağıdaki özellikler ile yapacağız.

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Şimdi dilerseniz en basit örnek ile başlayalım. Bir animasyonn keyframe oluşturup özelliğimizi kullanalım. Aşağıdaki kodu inceleyelim.

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

@keyframes ornek {
  from {background-color: red;}
  to {background-color: yellow;}
}

Yukarıda yer alan örnek kodumuzda ornek adında keyframe oluşturduk ve div özelliğimize animation-name: ornek; ile ilişkilendirdik. Animasyonumuz 4 sn içerisinde arkpalanı kırmızıdan sarıya çevirecektir. Kullanımı işte bu kadar kolay.

Animasyonlara Süre Tanımlama

Animasyonlarımıza yüzdelik cinsten süre tanımlayabiliriz. Aşağıdaki örnek koda bakarak daha kolay anlayalım.

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

@keyframes ornek{
  0%   {background-color: red;}
  25%  {background-color: yellow; left:200px; top:0px;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Yukarıdaki örnek kodumuzda 0% iken arkaplan kırmızı olacaktır. 25% ise sarı, 50% iken mavi ve son olarak 100% iken yeşil olacaktır. Burada zamanı yüzde cinsinden vermekteyiz.

Animasyonlara Gecikme Vermek – Delay

Delay yani gecikme animasyonun başlaması için gecikme süresini belirtir. Aşağıdaki örnek kodumuzu inceleyelim.

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

Yukarıdaki örneğimizi incelediğimizde 2sn gecikme değeri verilmiştir. Animasyonumuz 2sn geç başlayacaktır. Ayrıca eksi değer de vermek mümkündür.

Animasyon Tekrar Süresi – iteration-count

Animasyonumuza işi kaç kere yapması gerektiğini belirtebiliriz. Şimdi Aşağıda yer alan örneğimizi inceleyelim.

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

@keyframes ornek {
  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;}
}

Yukarıda yer alan örnek kodumuzda keyframe olarak bir animasyon belirledik. animation-iteration-count: 3 özelliğimiz ile bu animasyon 3 kere tekrar edecektir. Eğer özelliğimizi sonsuz döngü olarak yapmak istersek animation-iteration-count: infinite ; değerini vermemiz yeterli olacaktır.

Animasyonu Ters Yönde Çalıştırmak – Direction

Animasyonları ters yada istediğimiz gibi çalıştırabiliriz. animation-direction Özelliği belirtir bir animasyon geriye veya alternatif döngülerinde, ileri oynanması gerektiğini belirtir.

  • normal– animasyon (ileri), normal olarak oynanır. Bu varsayılan
  • reverse – animasyon ters yönde oynanır (geriye doğru)
  • alternate – animasyon geriye sonra, ilk ileri oynanır
  • alternate-reverse – animasyon öne, daha sonra ilk geriye doğru çalınır
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Animasyon Hızı – Timing

animation-timing-function özelliği ile animasyonlarımıza hız verebiliriz. Bu özelliğimiz 6 parametre alabilir. Şimdi inceleyelim.

  • ease – belirtir yavaş bir başlangıç ​​ile bir animasyon, sonra hızlı, sonra yavaş yavaş sonlanır (bu varsayılandır)
  • linear – belirtir baştan sona aynı hızda bir animasyon
  • ease-in – belirtir yavaş bir başlangıç ​​ile bir animasyon
  • ease-out – belirtir yavaş ucu ile bir animasyon
  • ease-in-out – belirtir yavaş bir başlangıç ​​ve sonu ile bir animasyon
  • cubic-bezier(n,n,n,n) – Bir kübik bezier işlevinde kendi değerleri tanımlamak Lets
div {
  width: 100px;
  height: 50px;
  background-color: red;
  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;}
}

Css ile Geçiş ve Animasyonlar karmaşık konular gibi görünebilir. Uzun bir konudur. Ama alıştırma yaparak çok daha rahat öğrenebileceksiniz. Bir diğer dersimizde görüşmek üzere.

Bir cevap yazın

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

Shares