CSS3 Animasyonlarının İyi Kullanılması: Öğretici, Örnek Kodlar ve Örnekler

Yazan makale:
  • Web Sitesi Tasarımı
  • Güncelleme: Ağustos 28, 2013

JS ve jQuery'yi kullandığımızda animasyonlar üzerinde tam kontrole sahibiz ve harika efektler yaratabiliriz, ancak fiyat oldukça yüksektir. İşlem süresi, tarayıcılar arası uyumluluk (örneğin, mobil cihazlar, JS'ye gelince oldukça farklıdır) ve kod karmaşıklığı, animasyonlu arayüzler oluştururken akılda tutulması gereken noktalardır.

Dolayısıyla, bugün CSS Animasyon ve Geçişlerini kullanarak JS'yi nasıl önleyeceğimizi göreceğiz. Çok temel adımlardan akordeon paneller ve animasyonlu alt menüler gibi harika efektlere kadar tartışacağız.

Bir koltuk, not defteri ve gerçek bir tarayıcı (IE'den başka bir şey) al ve başlayalım.

Isınmak

CSS animasyonlarını kullanmanın birkaç avantajı (ve hayatımızdaki her şey gibi dezavantajları) vardır. Bunları patronunuza veya müşterinize satmanız gerekiyorsa, aklınızda bulundurmanız gereken şey budur:

  • Donanım hızlandırmayı kullanabildikleri için potansiyel olarak daha hızlıdırlar (HTML5 uygulamaları gibi)
  • Mobil cihazlarda daha iyi performans gösterirler ve dokunma etkinliklerini izlemek için belirli kodlara ihtiyaç duymazlar
  • JS'nin tarayıcı tarafından yorumlanması gerekir ve tarayıcıyı kırma olasılıkları çok daha büyüktür. Böylece CSS başarısız olduğunda, JS tüm sayfayı kırabilirken sessizce başarısız olur
  • Oldukça iyi bir tarayıcı desteği var (bu site, belirli istatistikleri kontrol etmenize yardımcı olacak: http://caniuse.com/#search )

CSS3 Animasyon örnekleri

Bu yazının etine başlamadan önce, saf CSS'de yapılan güzel animasyonlara bakalım.

Saf CSS Twitter Fail Balina

Animasyonlu Başarısız Balina

Steven Dennis tarafından yapıldı, Bunu eylemde gör.

Saf CSS Kaydırma Kok Can
CSS 3 Animasyon Örnekleri: Scrolling Coke Can

Roman Cortes tarafından yapılmış, Bunu eylemde gör.

Saf CSS Yürüyüş Adamı

CSS 3 Animasyon Örnekleri: Yürüyen Adam

Andrew Hoyer tarafından yapıldı. Bunu eylemde gör.

Ellerini Kirletmek

Kodu başlatalım. Animasyonu tetiklemek için CSS sözde sınıflarını çok kullanacağız. Dürüst olmak gerekirse, birçok geliştirici, animasyonları etkinleştirmek ve devre dışı bırakmak için JS'yi kullanmanızı tavsiye eder, ancak burada daha kolay bir yol göreceğiz:

#test {background: red; } #test: hover {background: green; } #test: active {background: blue; } #test: target {background: black; }

Kullanması gereken birkaç başka sözde sınıf var, ama fikrin var! Yani burada #test öğesini tıklarsanız (link olduğunu varsayarak):

  • Normal durum: Arkaplan kırmızı olacak
  • Hover: Fare öğe alanına girdiğinde yeşil bir arka plana sahip olur
  • Etkin: Üzerinde imleci tıklattığınızda ve fare düğmesine basmaya devam ederken arka plan rengi mavi olur
  • Hedef: Geçerli sayfa URL'de #test'e sahip olduğunda bu öğe siyah olur

Bunların her biri CSS animasyonları için kullanılabilir, örneğin, bu kod ile hedef sözde öğenin kullanılmasını sağlayan CSS animasyonunu etkinleştirmek ve devre dışı bırakmak için 2 linkleri oluşturabilirsiniz:

<a href='#test'> etkinleştirin </a> <a href='#'> devre dışı bırakın </a>

CSS Geçişleri

CSS geçişi, başlangıçtan bitiş durumuna düzgün bir şekilde değişecektir. Böylece, “geçiş” özelliğini kullanarak zamanın ve etkilenecek her özelliğin ve animasyonun nasıl olması gerektiğini ana seçicide tanımlayacaksınız. Bir örnek görelim:

.test {/ * geçiş özelliği süresi zamanlama fonksiyonu, * / color: blue; geçiş: renkli 2'ler, yazı tipi boyutu 2'ler kolaylıkla çıkar; } .test: hover {color: red; } .test: active {font-size:% 200; }

.Test öğesinin üzerine geldiğinizde, renk yavaş yavaş maviden kırmızıya (güzel bir palet, ha?) Dönüşür. Öğeyi tıklattığınızda, yazı tipi boyutu kademeli olarak varsayılan yazı tipi boyutunun 200% 'sine artar.

Ayrıca, animasyon için kullanılabilen "zaman" ın nasıl harcanacağını, "geçiş zamanlaması" özelliğine de sahip bulunuyoruz. İşte olası değerler:

  • Doğrusal: Başından sonuna kadar aynı hız
  • Kolaylık: Yavaş başlangıç
  • Kolaylık: Yavaşça
  • Kolaylık: Yavaş başlangıç, ortası hızlı, sonra yavaş yavaş
  • Kolayca çıkış: Yavaş başlangıç, yavaş son
  • Kübik bezier (a, b, c, d): özel hız

Kübik Bezier işlevi, 4 ile 0 arasında değişen 1 numaraları ile, animasyon hızı X süresi için matematiksel eğriyi temsil eden özel bir animasyon oluşturacaktır.

Daha iyi bir tarayıcı uyumluluğu için, aşağıdaki gibi opera, Firefox ve webkit için satıcı öneklerini kullanmayı düşünmelisiniz:

div {width: 400px; -o-geçişi: genişlik 2; -moz-geçiş: genişlik 2; -webkit-geçişi: genişlik 2; geçiş: genişlik 2; }

Ayrıca, tarayıcı genişliğine (mobil cihazlar, tabletler) bağlı olarak farklı geçişler tanımlamak için medya sorgularından yararlanabilirsiniz. Bu basit bir örnektir:

body {font-size: 1em; } @ media screen ve (maksimum genişlik: 800px) {body {font-size: 0.8em; }} @media ekran ve (maksimum genişlik: 400px) {body {Yazı tipi boyutu: 0.7em; }}

Tarayıcı genişliğini artırdığınızda yazı tipi boyutu aniden değişecektir. Bu kod gerçekleşmesini engelleyecek ve daha yumuşak bir geçiş sağlayacaktır:

gövde {-o-geçişi: yazı tipi boyutu .5s doğrusal; -moz-geçişi: yazı tipi boyutu .5s doğrusal; -webkit-geçişi: yazı tipi boyutu .5s doğrusal; geçişi: font-size .5s linear; }

Genişlikleri, renkleri, dolguları, menü ekranını değiştirmek isterseniz, farklı manzara veya boyutlarda portre / manzaraya sahipseniz bunu da kullanabilirsiniz.

CSS Animasyon - Gerçek Eğlence Başlıyor

Animasyon, tek bir seçicide tanımlanan bir geçiş dizisidir. CSS animasyonlarını tanımlamak için 2 adımlarını izlemeniz gerekir.

@Keyframe kuralı, animasyon adımlarının bir dizisini tanımlamak için kullanılır ve bu animasyonun nasıl çalıştığını açıklayan benzersiz bir ad ve stillerle tanımlanır. Her zamanki gibi, bu örnekte olduğu gibi bazı satıcı öneklerine ihtiyacımız olacak:

/ * her satıcı için aynı kod * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animasyon {... @ -webkit-keyframe my-animasyon {... / * animasyon adı * / @keyframe my-animasyon {/ * kare seçici * / 0% {/ * kare stili * / Sol: 0px; Üst: 0px; } 25% {Sol: 200px; Üst: 0px; } 50% {Sol: 200px; Üst: 200px; } 75% {Sol: 0px; Üst: 200px; } 100% {Sol: 0px; Üst: 0px; }}

Bu nedenle, her stil, çerçeve / zaman aralığı (bir flash animasyondaki kareler gibi) yüzdesi ve orada uygulanması gereken stillerle tanımlanır. Bu anahtar kare, örneğin öğenin sola, sonra üst, sonra sağa, sonra aşağıya hareket edeceğini söylüyor.

1 adımını izledikten ve anahtar karenizi oluşturduktan sonra, onu gerçekten bir öğeye uygulayabilirsiniz. Daha sonra CSS geçişiyle yaptığımız gibi aynı mantığı kullanacağız, fark şu ki “geçiş” bizim çok karmaşık bir animasyon.

Bunu uygulamak için animasyon özelliğini kullanacağız ve 7 alt özelliklerine sahip:

  • İsim: Bu benzersiz tanımlayıcı
  • Süre: 0% ile 100% arasında ne kadar sürecek
  • Zamanlama işlevi: geçiş zamanlaması işleviyle hemen hemen aynı
  • Gecikme: 0% 'i başlatmak ne kadar sürer?
  • Yineleme sayımı: Kaç defa tekrarlayacağız (sonsuz döngü için “sonsuz”)
  • Yön: normal veya alternatif (ters)
  • Oyun durumu: animasyon çalışıyorsa veya duraklatılmışsa

Bu, animasyonu, sayfanın hedefi olduğunda #test öğesine uygular:

#test: target {/ * animation-name | süresi | zamanlama fonksiyonu | gecikme | yineleme sayısı | yön | play-state * / animation: benim-animasyonum 10'lerin doğrusal 0'leri sonsuz normal çalışma; }

Bu düşünceyle birkaç harika örnek oluşturabiliriz.

CSS Sadece Akordeon

CSS animasyonlarından yararlanan katlanabilir paneller oluşturacağız. İşte temel HTML yapısı:

<div class = "akordeon"> <a href="#tab1"> Sekme 1 </a> <div id = "tab1"> <p> METİN 1 </p> </div> <a href = "# tab2 "> Sekme 2 </a> <div id =" tab2 "> <p> METİN 2 </p> </div> <a href="#tab3"> Sekme 3 </a> <div id =" tab3 "> <p> METİN 3 </p> </div> </div>

Bu sadece panelleri ve bunların her birini tetikleyecek bağlantıyı yaratacaktır. İşte sihrin gerçekleştiği yer:

/ * akordeon içindeki herhangi bir div * / .accordion div {/ * varsayılan olarak gizlenir * / height: 0; taşma: gizli; / * kara büyü * / geçiş: yükseklik 1; } / * belirtilen div hedef * / .accordion div olduğunda: target {/ * height: auto çalışmaz, ancak bu iyi çalışacaktır * / height: 80px; }

Oldukça basit, ha? Ve tüm hayatını bunun için JS kullanarak mı harcadın? :)

Alt menüleri olan CSS Sadece Menü

Ve bu başka oldukça basit bir uygulamadır. Sitenizde kesinlikle bir navigasyon menüsü var ve çoğu zaman orada bazı alt menüler kullanmamız gerekiyor. Öğeleri göstermenin ve saklamanın en iyi yolu jQuery kullanıyor, değil mi? Peki, bu kodu test ettikten sonra tekrar düşünün:

<nav> <ul> <li> <a href='#item1'> Öğe 1 </a> <div> <ul> <li> <a href='#item11'> Öğe 1.1 </a> </ li> <li> <a href='#item12'> Öğe 1.2 </a> </li> </ul></div> </li> <li> <a href='#item2'> Öğe 2 </a> <div> <ul> <li> <a href='#item21'> Öğe 2.1 </a> </li> <li> <a href='#item22'> Öğe 2.2 </a> </li> </ul></div> </li> </ul> </nav>

Ve sihirbazlık burada başlar:

a {/ * sadece bağlantıları biraz daha iyi hale getirir * / display: block; dolgu maddesi: 4px; } nav {text-align: center; } / * herhangi bir menü (ana menü dahil) * / nav ul {display: inline-block; liste tarzı: yok; } nav> ul> li {/ * yatay elemanlar (dikey de işe yarar) * / float: left; } nav li div {/ * herhangi bir alt menünün çökmesi * / height: 0; taşma: gizli; / * Houdini duyguları * / geçiş: yükseklik 1; } nav li: hover> div {yükseklik: 56px; }

Özetliyor

Bu kesinlikle bir başlangıç ​​kılavuzu. CSS sadece animasyonlar ve henüz gelmesi gereken bir çok şey kullanılarak yapılabilecek pek çok başka serin etki var.

Peki bunu daha önce kullandın mı? CSS animasyonları için başka iyi bir uygulama düşünebilir misiniz? Düşüncelerinizi yorumlarınızı kullanarak paylaşın!

Rochester Oliveira hakkında

Brasil, Itajubá (MG) 'dan bir web tasarımcısı ve girişimcisiyim. Karanlık konular hakkında yazmayı ve güzel şeyler yapmayı seviyorum.