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

Transitions İçin Geçiş Desteği

Element
<audio>	26.0	10.0	16.0	6.1	12.1

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:

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

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:

div:hover {
  width: 300px;
}

ÇIKTI:

İ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:

div {
  width: 100px;
  height: 100px;
  background:#f39c12;
  -webkit-transition: width 2s; /* Safari */
  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;
}

Mouse ile kutuların üzerine gelin.

ÇIKTI:

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:

div {
  transition-delay: 1s;
}

Transition(Geçiş) + Transformation

---

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

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

Mouse ile kutunun üzerine gelin.

ÇIKTI:

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

---

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

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

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

div {
  transition: width 2s linear 1s;
}

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.

.fade{
        width:250px;
        height:250px;
        background:#f39c12;
        transition:all 0.3s ease;
}
.fade{
        opacity:0.5;
}
.fade:hover{
        opacity:1;
}

Renk Geçişi

---

.color:hover
{
   background:#53a7ea;
}

ÇIKTI:

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:

.test:hover
{
	-webkit-transform: scale(1.3);
    transform: scale(1.3);
}	

ÇIKTI:

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:

.dene:hover
{
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

ÇIKTI:

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:

.rotate:hover
{
  transform: rotateZ(-30deg);
}

ÇIKTI:

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.

.circle:hover
{
        border-radius:50%;
}

ÇIKTI:

3D Gölge

---

Kutuya 3d gölge verelim.

.test:hover
{
    box-shadow:
          1px 1px #53a7ea,
          2px 2px #53a7ea,
          3px 3px #53a7ea;
        
    transform: translateX(-3px);
}

ÇIKTI:

1284

Gönder