CSS3 transition Geçiş Efektleri

CSS3 ile birlikte gelen ve HTML elemanlarına geçiş efekti kazandırmaya imkan veren transition özelliği kullanımı ile ilgili bilgiler yer almakta.

CSS3 transition özelliği ile hazırlanmış örnek aşağıda yer almaktadır.

.

CSS3 transition kullanımı

Geçiş efekti uygulamak için transition özelliğine iki değer verilmesi gerekiyor.

• Efektin uygulanacağı CSS özelliği
• Geçiş efekti süresi

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

transition özelliğindeki width ile efektin sadece genişlik özelliğine uygulanacağını belirtiyoruz.

Nesnenin üzerine gelindiğinde nesnenin genişliğinin değişmesini sağlayalım.

div:hover {
    width: 300px;
}

Nesnenin üzerine gelindiğinde genişlik transition özelliğinde belirlemiş olduğumuz sürede (2s) gerçekleşecektir.

Nesnenin üzerinden başka bir konuma taşındığında nesne varsayılan boyutuna dönecektir.

Sözde sınıf :hover‘a ek height, color gibi özellik eklediğimizde eklemiş olduğumuz özelliklere geçiş efekti uygulanmayacaktır.

Çünkü sadece width özelliğine uygulanacağını belirttik.

Birden fazla geçiş efekti uygulamak

Birden fazla geçiş efekti uygulamak istersek transition özelliğine her uygulamak istediğimiz efekti virgül ile ekleyebiliriz.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 3s, height 5s;
    transition: width 2s, height 5s;
}

:hover özellik değerleri

div:hover {
    width: 300px;
    height: 300px;
}

Diğer bir yöntem ise tüm özelliklerini değişmesini sağlayan transition: all Xs; değeri ile yapılmaktadır.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 5s;
    transition: all 5s;
}

Burada dikkat edilmesi gereken tüm özelliklerin belirlemiş olduğumuz sürede (5s) geçiş efekti uygulanacağıdır.

Geçişler için zaman belirlemek

CSS3 transition-timing-function özelliğiyle geçişler için zaman belirleyebiliriz.

Alacağı değerler

• ease – Yavaş bir başlangıç, ardından hızlı, daha sonra yavaş yavaş sona eren geçiş efekti belirtir. (Varsayılan)
• linear – Başlangıç ve bitişi aynı hızda bir geçiş efekti belirtir.
• ease-in – Yavaş bir başlangıç geçiş efekti belirtir.
• ease-out – Yavaş bir bitiş geçiş efekti belirtir.
• ease-in-out – Yavaş başlangıç-bitiş geçiş efekti belirtir.
• cubic-bezier(n,n,n,n) – Bezier yöntemi ile zaman belirlememizi sağlar.

.

Geçişlerleri zamanlamak

Bazen geçiş efektini belli bir süre sonrasında çalışmasını isteyebiliriz.

Bunun için transition-delay özelliğini kullanabiliriz.

En baştaki örneğe transition-delay özelliği ve 1s değerini ekledik.

Artık geçiş efekti belirlediğimiz süre sonrasında başlayacaktır.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: width 2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

Geçişlerde 2B ve 3B Dönüşüm kullanmak

CSS3 ile birlikte gelen dönüşümlerden 2B dönüşümleri ve 3B dönüşümleri incelemiştik.

Dönüşümlere de geçiş efekti uygulayabiliriz.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

CSS3 transition özelliğinin uygulanması

Geçiş efektlerini her biri ayrı özellik belirterek kullanabiliriz.

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

Tek özellik satırı ile kısaltılmış olarak da kullanabiliriz.

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

CSS3 Derslerine buradan ulaşabilirsiniz…
Hayırlı günler dilerim.