07-02-2017 Saat: 18:29
(Son Düzenleme: 07-02-2017 Saat: 19:08, Düzenleyen: Muratbaykam.)
Forum Taraması : Tamamlandı , Böyle bir konu bulunamadı ✓
Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme(transition-property)
Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.
all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.
Geçiş Efekti Uzunluğunu Belirleme (transition-duration)
Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği yapıyoruz.
transition-delay
Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.
Animasyonumuz yani hoverimiz 0.5 saniye sonra başlayacaktır.
transition-timing-function
Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.
Daha önce sizlerle paylaştığım bu araçlar
[*]http://matthewlein.com/ceaser/
[*]http://easings.net/
[*]http://jeremyckahn.github.com/stylie/
ile transition-timing-function özelliğini kullanmak bir zevk haline geliyor.
transition kısayolu
Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi teek bir tannımlama ile bunları kısa bir şekilde tanımlamak da mümkün.
[*]
Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda toplayalım.
[*]
Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde kullanmayı tercih edeceğim.
Çoklu Geçiş Kullanımı
Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş efekti de uygulayabiliriz.
[*]
Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan rengini geçiş efekti ile değiştirdi.
Alıntıdır / Düzenlenmiştir Tarafımca .
Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme(transition-property)
Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.
Kod:
Yapısı: transition-property: none | all | [ <IDENT> ] [ ‘,’ <IDENT>]*
Aldığı Değerler: none | all | [ <IDENT> ] [ ‘,’ <IDENT> ]*
Başlangıç değeri: all
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok
Örneğin color değeri geçiş uygulanacak elemanın başlangıç ve son rengi arasında bir geçiş olacağını gösterir.all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.
PHP Kod:
a{
color:red;
transition-property: color;
}
a:hover {
color:blue;
}
Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği yapıyoruz.
Kod:
Yapısı : transition-duration: <zaman> [, <zaman>]*
Aldığı Değerler : <zaman> [, <zaman>]*
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok
0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak yorumlanır.PHP Kod:
a{
color:red;
transition-property: color;
transition-duration:0.5s;
}
a:hover {
color:blue;
}
transition-delay
Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.
PHP Kod:
a {
color:red;
transition-property: color;
transition-duration:0.5s;
transition-delay: 0.5s;
}
a:hover {
color:blue;
}
Animasyonumuz yani hoverimiz 0.5 saniye sonra başlayacaktır.
transition-timing-function
Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.
Daha önce sizlerle paylaştığım bu araçlar
[*]http://matthewlein.com/ceaser/
[*]http://easings.net/
[*]http://jeremyckahn.github.com/stylie/
ile transition-timing-function özelliğini kullanmak bir zevk haline geliyor.
transition kısayolu
Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi teek bir tannımlama ile bunları kısa bir şekilde tanımlamak da mümkün.
Kod:
transition-property: width;
transition-duration:0.5s;
transition-delay: 0.5s;
transition-timing-function:ease-in-out;Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda toplayalım.
Kod:
transition: width 0.5s ease-in-out 0.5s;Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde kullanmayı tercih edeceğim.
Çoklu Geçiş Kullanımı
Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş efekti de uygulayabiliriz.
Kod:
input{
display:block;
background-color:#788182;
border:0;
border-radius:5px;
width:100px;
padding:5px 10px;
color:#fff;
transition: width .5s ease-in-out, background .3s ease;
}
input:focus {
width:250px;
background-color:#50ebd6
}Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan rengini geçiş efekti ile değiştirdi.
Alıntıdır / Düzenlenmiştir Tarafımca .
→ Bana ulaşmak için / http://english.10tl.net
Mybb • PHP • VB.NET • HTML • CSS • MySQL
Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir.
