Merhaba, CSS geçişleri, bir öğenin mevcut durumundan bir başka duruma  geçmesini sağlar. Tek tek tüm öğelerin bir başlangıç durumundan son duruma kadar canlandırılması şeklinde çalışır.

Tanımlanabilen özellikler:

  • transition-property hareketlendirilecek öğeler.
  • transition-duration hareketliliğin (geçişin) süresi.
  • transition-timing-functiongeçişin zamanlama hesabı.
  • transition-delayanimasyonun başlaması için geçmesi gereken süre.

Tüm bu CSS özelliklerini ayrı ayrı tanımlayabilir veya yalnızca transitionkullanabiliriz. Bu şekilde kullanmak istersek tek belirtmemiz gereken şey süre olacaktır. Unutmamamız gereken şey, geçişlerin bir başlangıcı ve bitişi olan animasyonlardan oluştuğudur. Geçişler genellikle fareyle üzerine gelme durumlarında kullanılır.

Buna bir örnek yapalım:

<a href="#">Geçişsiz Link</a>
<a href="#" class="gecisli">Geçişli Link</a>

CSS:

a{ background: lightgrey; color: grey; padding:5px; }
a:hover{ background: yellow; color: red; }
a.gecisli{ transition: 2s; }

Görünümü:

Örnekte görüldüğü üzere transition kullanılmayan öğede :hover yani mouse ile üzerine gelindiğinde uyguladığımız kural (arka plan ve yazı renginin değişmesi) doğrudan uygulandı. Ancak geçiş uyguladığımız öğede bu değişikliğin gerçekleşmesi mouse ile üzerine gelindikten sonra 2 saniye sürdü. Ne kadar süreceğini biz transition:2s;ile karar verdik.

transition-duration

Geçişin süresini belirleyen bu özellik bir geçiş oluşturmak için tek ihtiyacımızdır. Saniyelerle ( 2s ) veya milisaniyeler ile ( 100ms) geçişin ne kadar sürede tamamlanacağını belirleyebiliriz.

<a href="#">Geçişsiz Link</a>
<a href="#" class="hizli-gecis">Hızlı Geçiş (0.5 s)</a>
<a href="#" class="yavas-gecis">Yavaş Geçiş (3 s)</a>

CSS:

a{ background: lightgrey; color: grey; padding:5px; }
a:hover{ background: yellow; color: green; }
a.hizli-gecis{ transition-duration: 0.5s; }
a.yavas-gecis{ transition: 3s; }

Görünümü:

transition-property

CSS öğelerinin yalnızca 3’de 1’i hareket (animasyon) kazandırılabilir. Bunların tam listesine buradan ulaşabilirsiniz.

Varsayılan olarak transition-propertydeğeri allolarak tanımlıdır. Yani mümkün olan tüm CSS öğelerini geçiş esnasında kullanır. Fakat yalnızca 1 veya bir kaç öğenin geçişli kullanılmasını tercih edebilirsiniz.

<a href="#">Geçişsiz Link</a>
<a href="#" class="arkaplan-gecisli">Sadece Arkaplan Geçişli</a>
<a href="#" class="tum-gecisler">Tümü Geçişli</a>

CSS:

a{ background: lightgrey; color: grey; padding:5px; }
a:hover{ background: yellow; border: 5px solid blue; color: green; }
a.arkaplan-gecisli{ transition-duration: 2s; transition-property: background; }
a.tum-gecisler{ transition-duration: 2s; }

Görünümü:

İlk öğemizde hiç geçiş kullanılmadı doğrudan :hover özellikleri uygulandı. Arkaplan geçişli öğemizde arkaplan rengi dışında diğer :hover özellikleri doğrudan uygulandı, arkaplan ise 2 saniye geçişli olarak uygulandı. Ve tüm öğelere uygulananda ise, tüm :hover özellikleri 2 saniye geçişli olarak uygulandı.

transition-timing-function

Zamanlama fonksiyonu her bir öğenin geçiş sırasındaki zamanlamasını hesaplamaya yarar. Varsayılan değeri easedolarak tanımlanmıştır. Geçiş başlangıcında hızlanır bitişte yavaşlar. Geçişin sabit bir hızda gerçekleşmesini sağlayabilirsiniz. Zamanlama fonksiyonları geçişi hızlandırabilir ve / veya yavaşlatabilir.

<main>
  <p><strong>Ease</strong>: yavaş başlar, ortada hızlanır, sonda yavaşlar</p>
  <div class="ease"></div>
  <p><strong>Linear</strong>: sabit hızlıdır</p>
  <div class="linear"></div>
  <p><strong>Ease In</strong>: yavaş başlar, sonda hızlanır</p>
  <div class="ease-in"></div>
  <p><strong>Ease Out</strong>: hızlı başlar, sonda yavaşlar</p>
  <div class="ease-out"></div>
  <p><strong>Ease In Out</strong>: ease gibi davranır fakat hızlanma/yavaşlama daha belirgindir</p>
  <div class="ease-in-out"></div>
</main>

CSS:

div{ height: 20px; left: 0; margin-top: -1rem; position: relative; transition: 1s; width: 20px; left: 0; position: relative; transition: 1s; }
main:hover div{ left: 200px; }
.ease{ background: crimson; transition-timing-function: ease; }
.linear{ background: midnightblue; transition-timing-function: linear; }
.ease-in{ background: mediumseagreen;  transition-timing-function: ease-in; }
.ease-out{ background: orangered; transition-timing-function: ease-out; }
.ease-in-out{ background: darkviolet; transition-timing-function: ease-out; }

Görünümü:

Örnekteki tüm geçişlerin süresi 1 saniye olarak ayarlanmıştır.

transition-delay

Bu özellik, geçiş başlamadan önce ne kadar beklemesi gerektiğini tanımlar.