CSS

CSS3 Transition Geçiş Efekti Kullanımı

Ocak 1, 2020
4 Okuma Süresi

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
<head>
    <style>
    #ornek {
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
    }
    #ornek:hover {
        width: 300px;
    }
    </style>
</head>
<body>
    <div id="ornek"></div>
</body>
</html>
 

 

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<html>
<head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background:#f39c12;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
    }
 
    #ornek1 {transition-timing-function: linear;}
    #ornek2 {transition-timing-function: ease;}
    #ornek3 {transition-timing-function: ease-in;}
    #ornek4 {transition-timing-function: ease-out;}
    #ornek5 {transition-timing-function: ease-in-out;}
 
    div:hover {
    width: 300px;
    }
    </style>
</head>
<body>
    <div id="ornek1"></div>
    <div id="ornek2"></div>
    <div id="ornek3"></div>
    <div id="ornek4"></div>
    <div id="ornek5"></div>
</body>
</html>
 

Çı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:

1
2
3
4
5
 
div {
  transition-delay: 1s;
}
 

Transition(Geçiş) + Transformation

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

1
2
3
4
5
 
div {
  transition: width 2s, height 2s, transform 2s;
}
 

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

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

1
2
3
4
5
6
7
8
 
div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.fade{
        width:250px;
        height:250px;
        background:#f39c12;
        transition:all 0.3s ease;
}
.fade{
        opacity:0.5;
}
.fade:hover{
        opacity:1;
}
 

Çıktı:

CSS Renk Geçişi

1
2
3
4
5
6
 
.color:hover
{
   background:#53a7ea;
}
 

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:

1
2
3
4
5
6
7
 
.test:hover
{
-webkit-transform: scale(1.3);
    transform: scale(1.3);
}
 

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:

1
2
3
4
5
6
7
 
.dene:hover
{
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
 

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.

1
2
3
4
5
6
 
.circle:hover
{
        border-radius:50%;
}
 

Çıktı:

3D Gölge

Kutuya 3d gölge verelim.

1
2
3
4
5
6
7
8
9
10
11
 
.test:hover
{
    box-shadow:
          1px 1px #53a7ea,
          2px 2px #53a7ea,
          3px 3px #53a7ea;
        
    transform: translateX(-3px);
}
 

Çıktı:

 

Etiketler

Yorum Yap

Yorum yapmak için tıklayın