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 transition

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:

Test

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

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:

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:

css transition

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

Linear

ease

ease-in

ease-out

ease-in-out

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:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

8073

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.