Google Fan Webmaster Forumu

Geri git   Google Fan Webmaster Forumu > Client side Programlama > HTML - CSS - XML

HTML - CSS - XML HTML & CSS Programlama

Seçenekler Stil
  #1  
Okunmamış 05.07.2014, 02:33
 
İstanbul Avrupa Şubesi
Yaş: 24
Mesajlar: 28
Konular: 28
Ticaret Sayısı: (0)
Aktiflik: 0 / 75
Wink CSS3 Transition ile Geçiş Efektleri

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

CSS3 ile aramıza katılan transition elemanı yüksek kalitede geçiş efektleri yapmamızı sağlıyor. Neredeyse her tip öğe üzerinde kullanabileceğimiz transition, web tasarımında yeni bir devrin başlangıcı oldu.

Daha önceleri Flash ve türevi programlarla hazırladığımız web için geçiş efektleri artık CSS3 transition ile hem daha performanslı hem de daha kolay.

Bugün sizler için detaylı bir CSS3 transition dersi hazırladık.

Transition

Elemanın örnek kullanımı aşağıdaki gibidir.

HTML-Kodu:
transition: [özellik] [süre] [tipi] [gecikme];
Genişletilmiş kod birimi ise şu şekildedir.

HTML-Kodu:
transition-property: color; /* Animasyon özelliği : yazı rengi */
transition-duration: 1s; /* Animasyon süresi : 1 saniye */
transition-timing-function: ease; /* Animasyon tipi : ease */
transition-delay: 2s; /* Animasyon gecikmesi : 2 saniye */
Tüm tarayıcılarda sorunsuz çalışan kod örneği ise bu şekilde :

HTML-Kodu:
.ornek {
 transition: background 1s ease-in;
 -webkit-transition: background 1s ease-in;
 -moz-transition: background 1s ease-in;
 -o-transition: background 1s ease-in;
}
Birimler

Özellik : Efekti uygulayacağımız elemanı seçiyoruz. Temel kod birimi transition-property şeklindedir. Örneğin yazı rengini zamanla değiştireceksen buraya color yazıyoruz.

HTML-Kodu:
transition-property:color;
Aşağıdaki örneklemede arka plan renginde değişiklik yaptığımız için background terimini kullandık.

Süre : Animasyonun tamamlanma süresini saniye veya milisaniye cinsinden belirtiyoruz. Örnek verecek olursak 1s veya 100ms gibi.

Tipi : Geçişini tipini belirtiyoruz. Seçeneklerimiz şu şekilde :
linear : Çizgisel geçiş. Başlangıç ve bitiş hızı aynı olan bu efekti cubic-bezier(0,0,1,1) ile de elde edebiliyoruz.
ease : Animasyon yavaş başlar, sonra hızlanır ve kapanış yine yavaş olur. Bu efekti cubic-bezier(0.25,0.1,0.25,1) ile de elde edebiliyoruz.
ease-in : Animasyonun yavaş başlamasını sağlar. Bu efekti cubic-bezier(0.42,0,1,1) ile de elde edebiliyoruz.
ease-out : Animasyonun yavaş bitmesini sağlar. Bu efekti cubic-bezier(0,0,0.58,1) ile de elde edebiliyoruz.
ease-in-out : Animasyonun başlangıç ve bitiş hızı yavaşlar. Diğer alanlar olduğu gibi kalır. Bu efekti cubic-bezier(0.42,0,0.58,1) ile de elde edebiliyoruz.
cubic-bezier(n,n,n,n) : 0 ile 1 arasında değer girebildiğimiz, geçişleri manuel olarak belirlediğimiz kod tipidir.
steps : Animasyon için adım belirtebileceğimiz geçiş tipidir. Örneğin steps(5, end) şeklinde ayarlandığında tüm animasyonun 5 adımda tamamlanmasını sağlarız. Geçişler diğer efektlere kıyasla daha sert olabilir.

Örnek : CSS3 Transitions - CodePen

Gecikme: Animasyonun ne zaman başlayacağını belirtmemizi sağlıyor. Temel kod birimi şu şekilde :

HTML-Kodu:
transition-delay: 2s;
Böylece animasyonun 2 saniye beklemeden sonra başlamasını sağlıyoruz.

Çoklu animasyon uygulama

Transition ile objelere birden fazla animasyon efekti uygulayabiliyoruz. Örneğin bir küpü daireye çevirelim, aynı zamanda arka plan ve yazı rengi de değişsin.

Örnek : CSS Transition Sample - CodePen

Yukarıdaki animasyon için kullandığımız transition kodları :

HTML-Kodu:
transition:
    background 1s ease-in-out,
    border-radius 1s ease,
    color 1s linear;

-webkit-transition:
    background 1s ease-in-out,
    border-radius 1s ease,
    color 1s linear;

-moz-transition:
    background 1s ease-in-out,
    border-radius 1s ease,
    color 1s linear;

-o-transition:
    background 1s ease-in-out,
    border-radius 1s ease,
    color 1s linear;
}
Tarayıcı uyumu

Firefox, Chrome, Opera ve Internet Explorer 10 gibi popüler tarayıcılar transition özelliğini desteklemekte. Safari için -webkit- kullanımı gerekiyor. Her zaman olduğu gibi Internet Explorer 9 ve öncesi bu özelliği desteklemiyor. Chrome 25 ve önceki versiyonları için -webkit- kullanımı gerekiyor.

Mobil kullanımlar : iOS Safari tarayıcısının 3.2, Anroid’in varsayılan tarayıcısı için 2.1 ve daha güncel versiyonları -webkit- kullanımı ile transition destekliyor. Opera Mobile ise 10′dan 12. versiyona kadar -o- tanımlamasına ihtiyaç duyuyor.

Örnekler

CSS3′ün transition elemanıyla ilgili örnekler arıyorsanız fazla uzağa gitmenize gerek yok. İşte daha önce sizlere sunduğumuz örneklendirmeler.
CSS ile Navigasyon Menü Tasarlayalım
CSS ile Renkli ve Görsel Geçişli Menü
CSS3 ile Açılır Arama Kutusu
HTML5 ve CSS3 ile Yaprak Menü
CSS ile Etkileyici İnteraktif Logo
CSS ile After Effects’e Yakın Geçiş
Sadece CSS ile TAB Mantığı Kullanarak Listeleme
CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak

Kapanış

Tasarımlara transition çok şey katıyor. Bazı yorumlarda animasyonunun ve geçişlerin sitenin yavaşlamasına sebep olup olmayacağı soruluyor.

Daha önceleri çok büyük ve hantal .swf dosyalarını sırf birkaç basit animasyon için web sayfalarında kullanıyorduk. O yüzden gönül rahatlığıyla transition elemanını kullanabilirsiniz. Sitenin her santimetre karesini animasyonlarla doldurmadığınız sürece bir yavaşlamaya sebep olmayacaktır.
Alıntı ile Cevapla

Reklam
Cevapla

Tag Ekle
css3, efektleri, gecis, ile, transition


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil



İçerik sağlayıcı paylaşım sitelerinden biri olan TurkWebmasterlar.Com WebMaster Forum Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. TurkWebmasterlar.Com hakkında yapılacak tüm hukuksal Şikayetler buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde TurkWebmasterlar.Com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatlarımız size dönüş yapacaktır.