Tasarım Kodlama

CSS3 Transition Geçiş Efekti Kullanımı

CSS Transitions(geçişler) , CSS özelliklerini değiştirirken animasyon hızını kontrol etmenin bir yolunu sunar. Özellik, değişikliklerinin hemen çalıştırılması yerine, bir özelliğin değişikliklerin belirli bir süre içinde gerçekleşmesine neden olabilirsiniz. Örneğin, bir öğenin rengini beyazdan siyaha değiştirirseniz, genellikle değişiklik anlık olur. CSS geçişleri etkinleştirildiğinde, tümü özelleştirilebilen bir ivme eğrisini takip eden zaman aralıklarında değişiklikler meydana gelir.

Başlangıç ​​ve son durumlar arasındaki durumlar tarayıcı tarafından örtülü olarak tanımlandığından, iki durum arasında geçişi içeren animasyonlara genellikle örtük geçişler denir.

CSS Transitions

CSS Transitions(geçişleri), belirli bir süre boyunca özellik değerlerini sorunsuz bir şekilde değiştirmenize olanak tanır.

Bir CSS geçiş efekti görmek için mouse aşağıdaki öğenin üzerine getirin:

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

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

CSS Transition(Geçişleri) Nasıl Kullanılır?


Bir geçiş efekti oluşturmak için iki şey belirtmelisiniz:

  • Efekt eklemek istediğiniz CSS özelliği
  • Etkinin süresi

Not: Süre kısmı belirtilmezse, varsayılan değer 0 olduğundan geçişin bir etkisi olmaz.

Aşağıdaki örnekte 100 piksel genişlik * 100 piksel yükseklik ve kırmızı <div> öğesi gösterilmektedir. <div> öğesi, width özelliği için 2 saniyelik bir geçiş efekti de belirtmiştir:

Örnek:

 

Geçiş efekti, belirtilen CSS özelliği (genişlik) değer değiştirdiğinde başlar.

Şimdi, bir kullanıcı <div> öğesinin üzerine geldiğinde width özelliği için yeni bir değer belirleyelim:

Çıktı:

İmleç öğenin dışına çıktığında, yavaş yavaş orijinal stiline geri döneceğine dikkat edin.

Birkaç Özellik Değerini Değiştirme

Geçişin Hız Eğrisini Belirleme

transition-timing-function Özelliği geçiş etkisi hız eğrisi belirtir.

Transition-timing-function Özelliği aşağıdaki değerlere sahip olabilir:

  • ease :Yavaş başlatma, sonra hızlı, ardından yavaş bitme ile bir geçiş efekti belirtir. (Bu varsayılan değerdir.)
  • linear :Baştan sona aynı hızda bir geçiş efekti belirtir.
  • ease-in :Yavaş başlatma ile bir geçiş efekti belirtir.
  • ease-out :Yavaş uçlu bir geçiş efekti belirtir.
  • ease-in-out :Yavaş başlangıç ​​ve bitişli bir geçiş efekti belirtir.
  • cubic-bezier(n,n,n,n) kübik-bezier fonksiyonunda kendi değerlerinizi tanımlamanızı sağlar.

Örnek:

Çıktı(Fare ile kutularda gezinin):

Geçiş Efekti Gecikmesi


transition-delay Özelliği geçiş etkisi (saniye olarak) bir gecikme belirtir.

Aşağıdaki örnekte başlamadan önce 1 saniye gecikme vardır:

Örnek:

Transition(Geçiş) + Transformation


Aşağıdaki örnek dönüşüme bir geçiş efekti ekler:

Diğer Transition(Geçiş) Örnekler


CSS geçiş özellikleri aşağıdaki gibi tek tek belirtilebilir:

veya kısa gösterim özelliğini kullanarak transition:

Solma Efekti


Bir şeylerin solması müşterilerden oldukça yaygın bir istektir. İşlevselliği vurgulamak veya bir eylem çağrısına dikkat çekmek için harika bir yoldur.

Çıktı:

CSS Renk Geçişi

Büyütmek ve Küçültmek


Bir elemanı büyütmek için genişliğini ve yüksekliğini ya da dolgusunu kullanmanız gerekiyordu. Ama şimdi büyütmek için CSS3‘ün transform(dönüşüm) kullanabiliriz.

Div‘inizin sınıfını “büyüyecek” şekilde ayarlayın ve ardından bu kodu stil bloğunuza ekleyin:

Bir öğeyi küçültmek onu büyütmek kadar basittir. Bir öğeyi büyütmek için 1’den büyük bir değer belirleriz, küçültmek için 1’den küçük bir değer belirtiriz:

Elemanları döndürme


CSS transform(dönüşümlerin) bir dizi farklı kullanımı vardır ve en iyilerinden biri bir öğenin transform(dönüşüm özelliğine) rotate değeri verin. Div’inize rotate sınıfını verin ve CSS‘nize aşağıdakileri ekleyin:

Çıktı:

Kare daire


Şu anda gerçekten popüler bir etki, bir kare öğeyi yuvarlak bir öğeye dönüştürmek veya tam tersi. CSS ile, bunu başarmak basit bir etki, sadece border-radiusözelliğine ayarlıyoruz.

Çıktı:

3D Gölge


Kutuya 3d gölge verelim.

Çıktı:

 

Yorum yap