Kullanıcı Arabirimi Değişikliklerini Vurgulamak için CSS3 Geçişleri ve Animasyonları Kullanma

Tasarımcılar ve sanatçılar, çalışmalarına ekstra bir katman eklemek amacıyla hareket, etki ve farklı türden yanılsamalar ile deneme konusunda uzun bir geçmişe sahiptir. Op sanat hareketi, 1960'larda hareket izlenimi vermek için optik illüzyonlar kullanmaya başladı..

O zamandan beri, izleyicinin bakış açısını çok boyutlu hareket kullanarak genişleten popüler kinetik sanat gibi yeni ve daha yeni yaklaşımlar ortaya çıktı. Hareket 1967'de ilk yanıp sönen imlecin icadıyla bilgisayar bilimlerinde de ortaya çıktı..

Ön uç geliştirmede, DOM öğeleri genellikle CSS3 piyasaya sürülmeden önce JavaScript tarafından canlandırıldı ve bu hala işe yarayan bir yöntem, ancak CSS3 tarafından sunulan yeni özellikler tasarımlarımızı geliştirmemize izin veriyor farklı efektler ve hareket ile daha sezgisel bir şekilde.

CSS3'ün sunduğu iki ana teknik, geçişler ve animasyonlardır. Bu yazıda onların ne olduğuna, aralarındaki farkın ne olduğuna ve bunlardan nasıl yararlanabileceğinize bir göz atacağız..

Geçişler

Geçişler ve animasyonlar hem durumdaki değişiklikleri görselleştirmek tarafından bir HTML öğesinin açıklaması CSS özelliklerinden birini veya daha fazlasını değiştirmek.

Durum değişikliği görselleştirmesinin en basit şekli, üzerine getirildiğinde bir düğmenin veya bağlantının rengini değiştirmektir. Olduğunda, eleman biraz farklı bir stil alır ve bu genellikle izleyici tarafından ekranda bir şey taşınmış gibi fark edilir..

Vurgulu bir bağlantının (veya netleme veya tıklama) CSS özelliklerini değiştirmek, geçişlerin en eski ve en basit şeklidir ve CSS3 döneminden çok önce vardı..

 bir renk: portakal;  a: vurgulu renk: kırmızı;  a: focus renk: mavi;  a: ziyaret renk: yeşil; 

Geçişler, bir HTML öğesi önceden tanımlanmış bir durumdan diğerine değiştiğinde kullanılır. CSS3, zamanlama işlevleri veya süre kontrolü gibi, öncekinden daha gelişmiş görselleştirmelere olanak sağlayan yeni özellikler tanıttı.

Animasyonların nasıl değiştiğini anladıktan sonra, bir sonraki bölümdeki yeni CSS özelliklerine göz atacağız. Şimdilik, geçişler hakkında bilmeniz gereken en önemli şeyleri görelim.

1. Her zaman bir başlangıç ​​ve bitiş durumu vardır.
2. Başlangıç ​​ve bitiş noktaları arasındaki durumlar, tarayıcı tarafından örtük olarak tanımlanmıştır, CSS ile değiştiremiyoruz..
3. Talep ederler açık tetikleme, CSS ile yeni bir sahte sınıf veya jQuery tarafından yeni bir sınıf eklemek gibi.

Aşağıda, akıllıca kullanılan CSS3 geçişlerinin güzel bir örneğini görebilirsiniz; burada, yazar gizli bilgileri müdahaleci olmayan ancak yine de kullanıcıların yeni içeriğe odaklanmasını yönlendiren bir şekilde gösterir..

Animasyonlar

Durum değişikliklerini daha karmaşık hareketlerle görselleştirmek istiyorsak veya açık bir tetikleyicimiz yoksa, örn. Sayfa yüklendiğinde efekti başlatmak istiyorsak, animasyonlar gitmenin yoludur.

Animasyonlar, kendimizi ayarlayarak ve yapılandırarak daha karmaşık bir yol tanımlamayı mümkün kılar. Ana kareler. Ana kareler canlandırma sırasında ara nokta, canlandırma öğesinin tarzını istediğimiz kadar değiştirmemizi sağlıyor..

Her ne kadar CSS3, gelişmiş animasyonlar oluşturmak için harika yollar sunsa da, geçiş yapmaktan ziyade bunları oluşturmak daha zordur, işte bu yüzden çalışmalarımızı kolaylaştıracak birçok harika animasyon kütüphanesi var..

CSS3 animasyonları hakkında bilmeniz gereken en önemli şeyler şunlardır:

1. açıkça tetikleme gerektirmezler, sayfa yüklenmeye başlayabilir veya tarayıcıda başka bir DOM olayı gerçekleştiğinde başlayabilirler
2. geçişlerin kullanıldığı durumlarda, örneğin yeni bir sınıf ya da sahte sınıf eklendiğinde ya da çıkarıldığında kullanılabilir (daha az sıklıkta kullanılmasına rağmen)
3. bazı anahtar kareler tanımlamamızı istiyorlar (orta eyaletler)
4. bu anahtar karelerin sayısını, sıklığını ve stilini belirleyebiliriz

Aşağıdaki örnekte harika bir animasyonlu açılır menü görebilirsiniz. Düğmeye tıkladığımızda animasyon başlar. Bu, click olayı gerçekleştiğinde liste öğelerine jQuery ile ek sınıflar eklenerek elde edilir.

Bu yeni sınıflar belirtilenlerle canlandırılmıştır @keyframes CSS dosyasındaki kurallar. Ekstra sınıflar, kullanıcı bir dahaki sefere düğmeyi tıkladığında ve menü tekrar gizlendiğinde jQuery tarafından kaldırılır.

CSS Özellikleri ve @keyframes At-Kural

Geçişler için ikisini de kullanabiliriz. geçiş kestirme özellik veya 4 adet tek geçişle ilgili özellik: geçiş tesisinde, geçiş süresi, Geçiş-zamanlama fonksiyonlu, ve Geçiş gecikme. Shorthand özelliği, tüm tek özellikleri kısaltılmış bir biçimde içerir..

Animasyonlar için var animasyon Elimizdeki kısayollar, yani 8 tekil animasyon özelliğinden daha azının olmadığı anlamına gelir. Animasyon adı, animasyon süresi, Animasyon-zamanlama fonksiyonlu, Animasyon gecikme, animasyon yineleme-sayısı, Animasyon-yönü, Animasyon-doldur-mod, ve Animasyon-oynatma hal.

Hem geçişlerde hem de animasyonlarda en önemli şey, daima durum değişikliği sırasında değiştirilecek CSS özelliklerini belirtmeniz gerekir. Geçişlerde şöyle görünür:

 .element background: orange; geçiş özelliği: arkaplan; geçiş süresi: 3s; geçiş-zamanlama fonksiyonu: kolaylığı;  .element: hover background: red; 

Belirttik arka fon özellik, çünkü geçiş sırasında değişecek olan budur..

Bir geçişde birden fazla CSS özelliğini değiştirebiliriz, bu durumda yukarıdaki kod şöyle değiştirilir: geçiş özelliği: arka plan, sınır;. Biz de kullanabilirsiniz geçiş özelliği: hepsi;, Her bir mülkü ayrı ayrı belirtmek istemiyorsak.

Stenoyu seçebiliriz geçiş aynı zamanda mülkiyet. Bunu yaparsak, iç özelliklerin uygun düzenine her zaman dikkat etmemiz gerekir (dokümanlardaki sözdizimine bakın).

 .element background: orange; geçiş: arkaplan 3s kolaylığı;  .element: hover background: red; 

Bir animasyon oluşturmak istiyorsak, ilgili siteyi belirtmemiz gerekmektedir. Ana kareler. CSS özelliklerinin ayrı ayrı tanımlanmış olarak değiştirilmesi gerekir @keyframes at-kurallar. İşte bunu nasıl yapabileceğimize bir örnek:

 .element position: göreceli; animasyon adı: slayt; animasyon süresi: 3 sn; animasyon-zamanlama fonksiyonu: kolaylığı;  @keyframes slaydı 0% left: 0; % 50 sol: 200 piksel;  100% sol: 400 piksel; 

Yukarıdaki örnekte çok basit bir kayma efekti oluşturduk. Tanımladık Animasyon adı, daha sonra, içinde belirttiğimiz 3 ana kareyi bağladı. @keyframes slide … at-kurallar. Yüzdeler, animasyonun süresine atıfta bulunur, bu nedenle örnekte% 50’si 1.5 saniyede gerçekleşir..

Stenoyu kullanabiliriz animasyon özelliği de olabilir veya daha basit olan anahtar kareleri tanımlayabiliriz. ila aşağıdaki şekilde kural:

 .element position: göreceli; animasyon: 3s slayt kolaylığı;  @keyframes slaydı from left: 0;  ila left: 400px; 

Daha karmaşık animasyonların yaratılması kendi sanat şeklidir, eğer ilgileniyorsanız, gelişmiş bir seçim çerçevesi nasıl oluşturulacağı ve hemen çıkma efekti oluşturacağınız konusundaki iki animasyon dersimizi okuyabilirsiniz..

Geçişler ve animasyonlar oluştururken bunu bilmeniz gerekir CSS özelliklerinin tümü animasyonlu olamaz, bu yüzden CSS Animatable’da değiştirmek istediğiniz mülkü kontrol etmek daima iyi bir fikirdir..

CSS3 animasyonları ve geçişleri, satıcı önekleriyle uzun süre çalıştı, artık kullanmak zorunda değiliz, ancak Mozilla Geliştirici Ağı hala eklemenizi tavsiye ediyor -webkit Webkit tabanlı tarayıcı desteği sadece son zamanlarda kararlılığa ulaştığından, bir süre önek.