geçişler Geçiş css3 geçiş örnekleri

Internet Explorer henüz geçiş özelliğini desteklememektedir.

Firefox 4, -moz- önekini gerektirir.

Chrome ve Safari, -webkit- önekini gerektirir.

Opera -o- önekini gerektirir.

Nasıl çalışır?

CSS3 geçişleri, bir öğenin bir stilden diğerine sorunsuz bir şekilde değişmesine izin veren efektlerdir.

Bunu yapmak için iki şey belirtmelisiniz:

• Efekti eklemek istediğiniz CSS özelliğini belirtin
• Etki süresini belirleyin.

Örnek Genişlik özelliği için geçiş etkisi, süre: 2 saniye: div { geçiş: genişlik 2s; -moz-geçiş: genişlik 2s; /* Firefox 4 */ -webkit-geçiş: genişlik 2s; /* Safari ve Chrome */ -o-geçiş: genişlik 2s; /* Opera */ }

Yorum: Süre özelliği belirtilmezse, varsayılan değer 0 olduğu için yumuşak geçiş gerçekleşmez.

Efekt, belirtilen CSS özelliği değişmeye başladığında başlayacaktır. Tipik olarak, geçiş efekti (CSS özelliğinin düzgün değişimi), kullanıcının fareyi öğenin üzerine getirdiği ana bağlıdır:

Örnek Belirt:öğeler için fareyle üzerine gelin : Yorum: Fare imleci öğenin alanından ayrıldığında, orijinal stiline sorunsuz bir şekilde geri döner. Birkaç Değişiklik Birden fazla stile efekt eklemek için virgülle ayrılmış birden çok özellik belirtin: Örnek Genişlik, Yükseklik ve Dönüştürme Efektleri Ekleme: Geçiş Özellikleri Aşağıdaki tablo tüm geçiş özelliklerini listeler: Mülk Tanım css geçiş Tek bir özellikte dört geçiş özelliği ayarlamak için stenografi özelliği 3 geçiş özelliği Geçişin uygulanması gereken CSS özelliğinin adını belirtir. 3 geçiş süresi Geçişin ne kadar süreceğini belirtir. Varsayılan değer 0 3 geçiş-zamanlama-fonksiyonu Geçişin hızının nasıl değişeceğini açıklar. Varsayılan değer "kolaylık" 3 geçiş gecikmesi Geçişin ne zaman başlayacağını belirler. Varsayılan 0 3 Aşağıdaki iki örnek, tüm geçiş özelliklerini belirler: Örnek Tüm geçiş özelliklerini tek bir örnekte kullanma: div { geçiş özelliği: genişlik; geçiş süresi: 1s; geçiş-zamanlama-fonksiyonu: doğrusal; geçiş gecikmesi: 2s; moz-geçiş-özelliği:genişlik; -moz-geçiş-süresi:1s; -moz-geçiş-zamanlama-fonksiyonu: doğrusal; -moz-geçiş-gecikmesi:2s; /* Safari ve Chrome */ -webkit-geçiş-özelliği:genişlik; -webkit-geçiş-süresi:1s; -webkit-geçiş-zamanlama-fonksiyonu:doğrusal; -webkit-geçiş-gecikmesi:2s; /* Opera */ -o-geçiş-özelliği:genişlik; -o-geçiş-süresi:1s; -o-geçiş-zamanlama-fonksiyonu:doğrusal; -o-geçiş-gecikmesi:2s; }

Eklenme tarihi: 2011-10-16



Mülk geçiş yeni CSS3 özelliklerini ifade eder. Onu daha iyi tanıyalım.

Fare ile üzerine geldiğinizde bağlantının renginin değişmesine hepimiz alışkınız. Bu durumda, renk yumuşak bir geçiş olmadan aniden değişir. Mülk geçiş JavaScript kullanmadan renk değiştiğinde küçük bir animasyon ekleyecektir.

Bu özelliğin spesifikasyonu şunları söylüyor:

CSS Geçişleri, CSS değerlerindeki özellik değişikliklerinin belirli bir süre boyunca sorunsuz gerçekleşmesini sağlar.

Başka bir deyişle, CSS Geçişleri, CSS özelliklerine değişiklikleri sorunsuz ve zaman içinde atamanıza olanak tanır.

Özelliği uygula geçiş her şeyi kullanabilirsiniz - arka plan, renk, uzunluk, yazı tipi boyutu vb. Temel olarak, bunlar bir rengi belirten özellikler veya uzunluk birimleri (px, em, ex) veya yüzde olarak ifade edilebilen özelliklerdir. :focus ve :active sözde sınıflarını da olay olarak kullanabiliriz.

tarayıcılar

Size hemen tarayıcılardan bahsedeceğim - yeni standart henüz benimsenmedi, bu yüzden şu an için -webkit-, -moz- ve -o- öneklerini kullanmak gerekiyor. Bu, özelliğin Chrome, Safari, Opera 10.5+, Firefox 4+ tarayıcıları tarafından desteklendiğini gösterir. "Favori" Internet Explorer'ımız her zaman olduğu gibi çalışmıyor, kullanıcı herhangi bir animasyon görmeyecek.

Bu yazıda öneki kullandım -webkit-, bu nedenle burada verilen tüm örnekler yalnızca Chrome ve Safari'de çalışacaktır.

Basit bir örnek düşünün - bağlantının arka planına yumuşak bir geçiş ekleyin

Başlangıç ​​olarak, fare ile gezinirken bir bağlantının rengindeki olağan değişikliğin nasıl yapıldığını hatırlayalım.

Şimdi CSS özelliğini kullanalım geçiş Bağlantının arka planını sorunsuz bir şekilde değiştirmek için. Sınıfla aynı olacak yeni bir sınıf oluşturalım basit ve bazı yeni satırlar ekleyin:

A.cool ( dolgu: 5px 10px; arka plan: #69f; renk: #000; -webkit-geçiş-özelliği: arka plan; -webkit-geçiş-duration: 0,5s; -webkit-geçiş-zamanlama-işlevi: kolaylık; ) a.cool:hover ( arka plan: #33f; renk: #fff; )

Birkaç test bağlantısı daha oluşturalım ve sonuca bakalım:

Şimdi arka planımız yarım saniye içinde sorunsuz bir şekilde renk değiştiriyor! Örnek, özelliklere sahip üç yeni satır eklediğimizi gösteriyor. -webkit-geçiş-özelliği, -webkit-geçiş-süresi, -webkit-geçiş-zamanlama-fonksiyonu.

Aslında, tek bir özellikte birleştirilebilirler:

webkit geçişi: arka plan 0,5 saniyelik kolaylık;

Ayrıca metin rengine yumuşak bir değişiklik de ekleyebilirsiniz:

A.cool2 ( dolgu: 5px 10px; arka plan: #69f; renk: #000; -webkit-geçiş: arka plan 0,5 sn hız, renk 1.0 sn hız; ) a.cool2:hover ( arka plan: #33f; renk: #fff ; )

Bu kod, farenin üzerine gelindiğinde, arka plan rengini yarım saniye ve yazı tipi rengini 1 saniye boyunca sorunsuz bir şekilde değiştirecektir. Kontrol ediyoruz:

Animasyon için aynı parametreleri kullanırsak, şu ifadeyi kullanabiliriz: -webkit-transition: all 0.5s kolaylığı;

Artık Geçiş efekti tüm değişen özelliklere aynı parametrelerle uygulanacaktır - 0,5 saniye, hareket hızı efekti.

Ayrıca efekte bir gecikme ekleyebilirsiniz. geçiş gecikmesi:

A.cool3 ( dolgu: 5px 10px; arka plan: #69f; renk: #000; -webkit-geçiş: tüm 0,5 saniyelik kolaylık; -webkit-geçiş-delay: 0,5s; ) a.cool3:hover ( arka plan: #33f ; renk: #fff; )

Şimdi animasyon, fareyi gezdirdikten yarım saniye sonra çalışacaktır. Her ihtimale karşı kontrol edelim:

Referans tablosu

Malzemeyi daha iyi anlamak için dikkatinize küçük bir referans tablosu getiriyorum.

Geçiş özelliği Animasyonun uygulanacağı özellik. Hemen hemen tüm CSS özellikleri: renk, arka plan, genişlik, yazı tipi boyutu vb. geçiş süresi Animasyonun süresi. Saniye cinsinden süre. geçiş zamanlama işlevi Animasyon için kullanılan geçici işlev: hareket hızı, doğrusal, giriş kolaylığı, giriş kolaylığı, kolay çıkış, kübik-bezier geçiş gecikmesi Animasyon gecikmesi. Saniye cinsinden süre.

CSS geçiş özelliği, bir geçiş efektinin (bir öğenin iki durumu arasındaki geçiş) tüm özelliklerini tek bir bildirimde ayarlamanıza olanak tanır.

Bu özellik, aşağıdaki özelliklerin kısa yoludur (liste, değerlerin belirtildiği sırayı takip eder):

Tarayıcı Desteği

Mülk			Opera		IExplorer	kenar
geçiş	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -Ö-	6.1 3.1 -webkit-	10.0	12.0

CSS sözdizimi:

geçiş: "özellik süresi zamanlama-fonksiyon gecikmesi | ilk | miras"; /* tek bir bildirimde her özellik için geçiş etkisinin ayrı ayrı listelenmesine izin verilir */ /* sözdizimi şöyle olur: özellik | süre | zamanlama fonksiyonu | gecikme,..., mülkiyet | süre | zamanlama fonksiyonu | gecikme */ /* tüm değerlere izin verilmez, ancak örneğin üst kısmında gösterilen sırayı izlemelisiniz */ /* yalnızca gecikme belirtmek istiyorsanız, süreyi de (0s) belirtmeniz gerektiğini unutmayın. */ /* yani . 4 saniyelik bir gecikme belirtmek istiyorsanız, bu geçişi yazmanız gerekir: 0s 4s; */ geçiş: genişlik 2s kolaylık 100ms, yükseklik 1s doğrusal 2s, arka plan 0s 4s; /* Sayfanın altındaki örneğe bakın */

JavaScript sözdizimi:

Object.style.transition = "width 3s hareket kolaylığı 2s"

Mülk değerleri

Anlam	Tanım
geçiş özelliği	Geçiş efektinin kullanılacağı CSS özelliğinin adını belirtir. Varsayılan değer hepsidir.
geçiş süresi	Geçiş efektinin kaç saniye veya milisaniye süreceğini belirtir.
geçiş-zamanlama-fonksiyonu	Bir geçiş efektinden etkilenen bir CSS özelliğinin ara değerlerinin matematiksel bir fonksiyon (kübik bezier eğrisi) kullanılarak nasıl hesaplandığını açıklamak için kullanılır. Bu, temel olarak, geçiş etkisinin süresi boyunca geçiş hızının değişebilmesi için bir "hızlanma" eğrisi oluşturmanıza olanak tanır. Varsayılan değer kolaylıktır.
geçiş gecikmesi	Geçiş efektinin ne zaman başlayacağını belirtir (efektin başlaması için bir gecikme görevi görür). Varsayılan değer 0 saniyedir.
	Bir özelliği varsayılan değerine ayarlar.
	Değerin üst öğeden devralındığını belirtir.

CSS sürümü

CSS3

Miras

Numara.

animasyonlu

Numara.

kullanım örneği

Bir öznitelik seçici (belirtilen değerle) ve geçiş genel özelliği kullanılarak CSS'de kayan bir arama örneği:

Arama:

CSS geçişleri CSS özelliklerini değiştirirken animasyon hızını kontrol etmenin bir yolunu sağlar. Mülk değişikliklerinin hemen yürürlüğe girmesini sağlamak yerine, bir mülkteki değişikliklerin belirli bir süre içinde gerçekleşmesini sağlayabilirsiniz.Örneğin, bir öğenin rengini beyazdan siyaha değiştirirseniz, değişiklik genellikle anında gerçekleşir. CSS geçişleri etkinleştirildiğinde, tümü özelleştirilebilen bir hızlanma eğrisini takip eden zaman aralıklarında değişiklikler meydana gelir.

İki durum arasında geçişi içeren animasyonlara genellikle örtük geçişler başlangıç ​​ve son durumlar arasındaki durumlar tarayıcı tarafından örtük olarak tanımlandığından.

CSS geçişleri, hangi özellikleri canlandıracağınıza karar vermenizi sağlar ( onları açıkça listelemek), animasyonun ne zaman başlayacağını (a ayarlayarak) gecikme), geçişin ne kadar süreceği (bir süre) ve geçişin nasıl işleyeceği (bir zamanlama fonksiyonu, Örneğin. başlangıçta doğrusal veya hızlı, sonunda yavaş).

Hangi CSS özelliklerine geçiş yapılabilir?

Web yazarı, hangi özelliğin hangi şekilde canlandırılması gerektiğini tanımlayabilir. Bu, karmaşık geçişlerin oluşturulmasına izin verir. Bazı özellikleri canlandırmak mantıklı olmadığından, canlandırılabilir özelliklerin listesi sonlu bir kümeyle sınırlıdır.

Not: Animasyon uygulanabilen özellikler seti, spesifikasyon geliştikçe değişmektedir.

Otomatik değer genellikle çok karmaşık bir durumdur. Spesifikasyon, auto öğesinden ve öğesine animasyon yapılmamasını önerir. Gecko'ya dayalı olanlar gibi bazı kullanıcı aracıları bu gereksinimi uygular ve WebKit'e dayalı olanlar gibi diğerleri daha az katıdır. Otomatik ile animasyonları kullanmak, tarayıcıya ve sürümüne bağlı olarak öngörülemeyen sonuçlara yol açabilir ve bundan kaçınılmalıdır.

geçişleri tanımlama

CSS Geçişleri, kısayol geçiş özelliği kullanılarak kontrol edilir. Bu, geçişleri yapılandırmanın en iyi yoludur, çünkü CSS'de hata ayıklamak için çok zaman harcamak zorunda kalmak çok sinir bozucu olabilen senkronizasyon dışı parametrelerden kaçınmayı kolaylaştırır.

Aşağıdaki alt özelliklerle geçişin bileşenlerini tek tek kontrol edebilirsiniz:

(Bu geçişlerin yalnızca örneklerimizin amacı için sonsuz döngüye girdiğine dikkat edin; CSS geçişleri yalnızca baştan sona bir özellik değişikliğini görselleştirir. Bu döngüde görselleştirmelere ihtiyacınız varsa, CSS animasyon özelliğine bakın.)

geçiş-özelliği Geçişlerin uygulanması gereken CSS özelliklerinin adını veya adlarını belirtir. Yalnızca burada listelenen özellikler geçişler sırasında canlandırılır; diğer tüm özelliklerdeki değişiklikler her zamanki gibi anında gerçekleşir. geçiş-duration Geçişlerin gerçekleşmesi gereken süreyi belirtir. Geçiş sırasında tüm mülkler için geçerli olan tek bir süre veya her bir özelliğin farklı bir süre boyunca geçiş yapmasına izin vermek için birden çok değer belirtebilirsiniz.

geçiş süresi: 0,5 sn

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüşüm rengi; -webkit-geçiş-süresi: 0,5s; -webkit-geçiş-zamanlama-fonksiyonu: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüştürme rengi; geçiş süresi: 0,5 s; geçiş zamanlama işlevi: içeri girme kolaylığı; ) .box1( dönüştürme: döndürme(270deg); -webkit- transform: döndürme (270deg); genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüştürme rengi; -webkit-geçiş-süresi: 0,5 s; -webkit-geçiş-zamanlama-işlevi: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka planı- renk nt boyutunda sol üst dönüştürme -webkit-transformv color; geçiş süresi: 0,5 sn; geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş süresi: 1s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst -webkit-dönüştürme rengi; -webkit-geçiş-süresi: 1s; -webkit-geçiş-zamanlama-işlevi: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme rengi;geçiş süresi: 1sn;geçiş-zamanlama-işlevi: içeri girme kolaylığı; ) .box1( dönüştürme: döndürme(270deg); -webkit-dönüşüm: döndürme(270deg); genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arka plan rengi yazı tipi- boyut sol üst -webkit-dönüşüm dönüştürme rengi; -webkit-geçiş-süresi: 1s; -webkit-geçiş-zamanlama-fonksiyonu: içeri girme kolaylığı; geçiş-özelliği: genişlik yükseklik arka plan-renk yazı tipi-boyutu sol üst dönüştürme - webki t-dönüşüm rengi; geçiş süresi: 1s; geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş süresi: 2s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüşüm rengi; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama işlevi: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüşüm rengi; geçiş süresi: 2s; geçiş zamanlama işlevi: içeri girme kolaylığı; ) .box1( dönüştürme: döndürme(270deg); -webkit-dönüşümü: döndür(270deg); genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik- yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüştürme rengi; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-işlevi: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi - ben ze sol üst dönüştürme -webkit-dönüştürme rengi; geçiş süresi: 2s; geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş süresi: 4s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüşüm rengi; -webkit-geçiş-süresi: 4s; -webkit-geçiş-zamanlama-fonksiyonu: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüşüm rengi; geçiş süresi: 4s; geçiş zamanlama işlevi: içeri girme kolaylığı; ) .box1( dönüştürme: döndürme(270deg); -webkit-dönüşümü: döndürme (270deg); genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik- yükseklik arka plan rengi yazı tipi boyutu sol üst dönüştürme -webkit-dönüştürme rengi; -webkit-geçiş-süresi: 4s; -webkit-geçiş-zamanlama-işlevi: içeri girme kolaylığı; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi - ben ze sol üst dönüştürme -webkit-dönüştürme rengi; geçiş süresi: 4s; geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş-zamanlama-fonksiyonu Özellikler için ara değerlerin nasıl hesaplanacağını tanımlayan bir fonksiyon belirtir. Zamanlama fonksiyonları geçişin ara değerlerinin nasıl hesaplandığını belirler. Çoğu zamanlama işlevi, bir kübik bezier tanımlayan dört nokta tarafından tanımlandığı gibi, karşılık gelen işlevin grafiği sağlanarak belirlenebilir. Ayrıca, Hareket Hızlandırma İşlevleri Hile Sayfası'ndan hareket hızı da seçebilirsiniz.

geçiş-zamanlama-fonksiyonu: kolaylık

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-fonksiyonu: kolaylık; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş zamanlama işlevi: kolaylık; ) .box1( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25px; konum:mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arkaplan-renk yazı tipi-boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-işlevi: kolaylık; geçiş-özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş süresi işlevi: kolaylık; ) işlev updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "kutu1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş-zamanlama-fonksiyonu: doğrusal

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama işlevi: doğrusal; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş zamanlama işlevi: doğrusal; ) .box1( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yüksekliği arka plan-renk yazı tipi-boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş-özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş süresi işlevi: doğrusal; ) işlev updateTransition() ( var el = document.querySelector("div.box"); if (el) (el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş-zamanlama-fonksiyonu: adım sonu

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-fonksiyonu: adım sonu; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş zamanlama işlevi: adım sonu; ) .box1( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst:25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arka plan-renk yazı tipi-boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama-işlevi: adım sonu ; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş zamanlama işlevi: adım sonu; ) işlev updateTransition() ( var el = document.querySelector("div.box) "); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş-zamanlama-fonksiyonu: adımlar(4, bitiş)

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel;) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama işlevi: adımlar(4, bitiş); ​​geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş zamanlama işlevi: adımlar(4, bitiş); ​​) .box1( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renk: sarı; yazı tipi- boyut: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arka plan-renk yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-zamanlama -işlev: adımlar(4, bitiş); ​​geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş zamanlama işlevi: adımlar(4, bitiş); ​​) işlev updateTransition() ( var el = belge.q uerySelector("bölme kutusu"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş gecikmesi Bir özelliğin değiştirildiği zaman ile geçişin fiilen başladığı zaman arasında ne kadar bekleneceğini tanımlar.

geçiş gecikmesi: 0,5 s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel; ) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-gecikmesi: 0,5s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş-özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş gecikmesi: 0,5 sn; geçiş zamanlama işlevi: doğrusal; ) .box1 ( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi ; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yükseklik arka plan-renk yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s ; -webkit-geçiş-delay: 0,5s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş-özellik: genişlik yüksekliği arka plan-renk yazı tipi-boyutu sol üst renk; geçiş süresi: 2s; geçiş-gecikmesi: 0,5s ; geçiş-zamanlama-fonksiyonu: doğrusal; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş gecikmesi: 1s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel; ) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-gecikmesi: 1s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş gecikmesi: 1 sn; geçiş zamanlama işlevi: doğrusal; ) .box1( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renkli : sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yüksekliği arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; - webkit-geçiş-delay: 1s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş-özellik: genişlik yüksekliği arka plan-renk yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş-gecikmesi: 1s; trans pozisyon-zamanlama-fonksiyonu: doğrusal; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş gecikmesi: 2s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel; ) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-gecikmesi: 2s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş gecikmesi: 2 sn; geçiş zamanlama işlevi: doğrusal; ) .box1 ( genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: mavi; renkli : sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yüksekliği arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; - webkit-geçiş-delay: 2s; -webkit-geçiş-zamanlama-fonksiyonu: doğrusal; geçiş-özelliği: genişlik yüksekliği arka plan-renk yazı tipi boyutu sol üst renk; geçiş süresi: 2s; geçiş-gecikmesi: 2s; tran pozisyon-zamanlama-fonksiyonu: doğrusal; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

geçiş gecikmesi: 4s

.parent ( genişlik: 250 piksel; yükseklik: 125 piksel; ) .box ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: kırmızı; yazı tipi boyutu: 20 piksel; sol: 0 piksel; üst: 0 piksel; konum: mutlak; -webkit- geçiş özelliği: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; -webkit-geçiş-süresi: 2s; -webkit-geçiş-gecikmesi: 4s; -webkit-geçiş-zamanlama-işlevi: giriş kolaylığı; geçiş -özellik: genişlik yükseklik arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi: 2 sn; geçiş gecikmesi: 4 sn; geçiş zamanlama işlevi: içeri girme kolaylığı; ) .box1 ( genişlik: 50 piksel; yükseklik: 50 piksel ; arka plan rengi: mavi; renk: sarı; yazı tipi boyutu: 18 piksel; sol: 150 piksel; üst: 25 piksel; konum: mutlak; -webkit-geçiş-özelliği: genişlik yüksekliği arka plan rengi yazı tipi boyutu sol üst renk; -webkit -geçiş-süresi: 2s; -webkit-geçiş-gecikmesi: 4s; -webkit-geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; geçiş-özellik: genişlik yüksekliği arka plan rengi yazı tipi boyutu sol üst renk; geçiş süresi : 2s; geçiş-d gecikme: 4s; geçiş-zamanlama-fonksiyonu: giriş-çıkış kolaylığı; ) function updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

Steno CSS sözdizimi aşağıdaki gibi yazılmıştır:

Böl (geçiş: ; }

Örnekler

basit örnek

Bu örnek, kullanıcının fareyi öğenin üzerine getirmesi ile animasyon efektinin başlangıcı arasında iki saniyelik bir gecikmeyle dört saniyelik bir yazı tipi boyutu geçişi gerçekleştirir:

#delay ( yazı tipi boyutu: 14 piksel; geçiş özelliği: yazı tipi boyutu; geçiş süresi: 4s; geçiş gecikmesi: 2s; ) #delay:hover ( yazı tipi boyutu: 36px; )

Birden çok animasyonlu özellik örneği

HTML içeriği

Aşağıdaki kutu, genişlik, yükseklik, arka plan rengi, dönüştürme için geçişleri birleştirir. Bu özelliklerin canlandırıldığını görmek için kutunun üzerine gelin.

CSS içeriği

.box ( border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; geçiş: genişlik 2s, height 2s, background-color 2s, transform 2s; ) .box:hover ( arka plan rengi: #FFCCCC; genişlik: 200 piksel; yükseklik: 200 piksel; dönüştürme: döndürme (180deg); )

Özellik değeri listeleri farklı uzunluklarda olduğunda

Herhangi bir mülkün değer listesi diğerlerinden daha kısaysa, eşleşmeleri için değerleri tekrarlanır. Örneğin:

Div ( geçiş özelliği: opaklık, sol, üst, yükseklik; geçiş süresi: 3s, 5s; )

Bu, sanki şöyleymiş gibi ele alınır:

Div ( geçiş özelliği: opaklık, sol, üst, yükseklik; geçiş süresi: 3s, 5s, 3s, 5s; )

Benzer şekilde, herhangi bir özelliğin değer listesi geçiş özelliği için olandan daha uzunsa, kesilir, bu nedenle aşağıdaki CSS'ye sahipseniz:

Div ( geçiş özelliği: opaklık, sol; geçiş süresi: 3s, 5s, 2s, 1s; )

Bu şu şekilde yorumlanır:

Div ( geçiş özelliği: opaklık, sol; geçiş süresi: 3s, 5s; )

Menüleri vurgularken geçişleri kullanma

CSS'nin yaygın bir kullanımı, kullanıcı fare imlecini üzerlerine getirdiğinde bir menüdeki öğeleri vurgulamaktır. Efekti daha da çekici kılmak için geçişleri kullanmak kolaydır.

Kod parçacıklarına bakmadan önce, canlı demoya bir göz atmak isteyebilirsiniz (tarayıcınızın geçişleri desteklediğini varsayarak).

İlk olarak, HTML kullanarak menüyü kurduk:

Ardından, menümüzün görünümünü ve hissini uygulamak için CSS'yi oluştururuz. İlgili kısımlar burada gösterilmektedir:

A ( color: #fff; background-color: #333; geçiş: tüm 1'ler hareket hızı; ) a:hover, a:focus ( color: #333; background-color: #fff; )

Bu CSS, öğe :hover ve :focus durumlarındayken değişen arka plan ve metin renkleri ile menünün görünümünü oluşturur.

JavaScript örnekleri

Aşağıdakilerden hemen sonra bir geçiş kullanırken dikkatli olunmalıdır:

• .appendChild() kullanarak öğeyi DOM'ye ekleme
• bir öğenin ekranının kaldırılması: yok; özellik.

Bu, ilk durum hiç oluşmamış ve öğe her zaman son durumundaymış gibi ele alınır. Bu sınırlamayı aşmanın kolay yolu, geçiş yapmayı düşündüğünüz CSS özelliğini değiştirmeden önce birkaç milisaniyelik bir window.setTimeout() uygulamaktır.

JavaScript işlevselliğini sorunsuz hale getirmek için geçişleri kullanma

Geçişler, JavaScript işlevlerinizde herhangi bir şey yapmanıza gerek kalmadan işlerin daha sorunsuz görünmesini sağlamak için harika bir araçtır. Aşağıdaki örneği alın.

Topu hareket ettirmek için herhangi bir yere tıklayın

JavaScript'i kullanarak, topu belirli bir konuma getirme efektini gerçekleştirebilirsiniz:

varf = document.getElementById("foo"); document.addEventListener("tıklama", function(ev)( f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+( ev.clientX-25)+"px)"; ),yanlış);

CSS ile ekstra çaba harcamadan sorunsuz hale getirebilirsiniz. Öğeye bir geçiş eklemeniz yeterlidir; herhangi bir değişiklik sorunsuz bir şekilde gerçekleşecektir:

P ( dolgu-sol: 60 piksel; ) #foo ( kenarlık yarıçapı: 50 piksel; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan: #c00; konum: mutlak; üst: 0; sol: 0; geçiş: 1s dönüşümü; )

Bir geçişin başlangıcını ve bitişini algılama

propertyName Geçişi tamamlanan CSS özelliğinin adını gösteren bir dize. elapsedTime Olayın tetiklendiği sırada geçişin kaç saniye sürdüğünü gösteren bir kayan nokta. Bu değer, geçiş gecikmesi değerinden etkilenmez.

Bir durumdan diğerine bir animasyon geçişi ayarlamak için CSS Geçiş özelliği gereklidir. Animasyon, :hover ve :active sözde öğelerle çalışır, yani. bir nesne bir durumdan diğerine geçtiğinde.

CSS geçiş sözdizimi

geçiş : [yok | ] || || || ;

Sözdizimi oldukça göz korkutucu görünüyor, ama aslında her şey basit. Nasıl çalıştığına dair basit örneklere bakalım. İki örnekten sonra, sözdizimi öğelerinin her biri ayrıştırılacaktır:

Geçiş Özelliği ile Örnekler

Örnek 1. Geçiş yoluyla html'de animasyon

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

• all - ко всему объекту (можно опустить, если задано время)
• color - к цвету текста
• background - к цвету фона объекта
• width , height - к изменению габаритов по ширине и высоте соответственно
• none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration : 1s ;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function

transition-timing-function : value ;

Где value может принимать значения:

• ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
• step-start - мгновенный старт, равносильно параметру steps(1, start)
• step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
• cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
• steps(a,b) - изменение рывками

Например

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

• -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform-origin - для Chrome, Safari, Android и iOS
• -o-transform-origin - для Opera до версии 12.10
• -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

document.getElementById("elementID").style.transition