CSS Geçişlerine ve Animasyonlarına Giriş

Son zamanlarda diğer yayınların yorumlarında, bazı okuyucuların özellikle CSS hakkında daha fazla “ipucu ve püf noktası” makalesi istediğini fark ettim. Bu nedenle, bugünün gönderisinde, web sitenizde zorlayıcı mikro etkileşimler oluşturmak için kullanılabilecek biraz CSS "hilesine" yararlı bir giriş olacağını umduğum şeyi sunacağım. Spesifik olarak, CSS3 geçişlerini ve animasyonlarını nasıl oluşturacağımızı öğreneceğiz. Bunları ne zaman ve nerede kullanmak isteyebileceğiniz hakkında da konuşacağız.

CSS Geçişleri ve Animasyonları Nelerdir?

CSS'nin yıllar içindeki evrimi, dilde gerçekten şaşırtıcı bazı yeniliklere yol açmıştır. Geçişler ve animasyonlar söz konusu olduğunda, daha önce Adobe Flash gibi bir program veya tamamen başka bir kodlama dili (Javascript gibi) gerektiren şeyler artık HTML ve CSS'den başka bir şeyle mümkün değil.

Daha iyi tarayıcılar ve daha yüksek web standartları (diğer şeylerin yanı sıra) tarafından sağlanan bu tür bir dil olgunluğu, ön uç geliştiriciler olarak ikiye katlanan web tasarımcıları için büyük bir nimet olmuştur. Artık daha azıyla daha fazlasını yapabiliyorlar ve tüm web tasarımı/geliştirme süreci biraz daha kolaylaştı.

Bununla birlikte, CSS geçişleri ve animasyonları hala CSS'nin gelişmiş kullanımları olarak kabul edilir. Kendimi “gelişmiş bir geliştirici” olarak görmediğim için makalelerimin çoğunda uzak durmaya çalıştığım bir kodlama yelpazesi – HTML veya CSS kadar erişilebilir bir dilde bile.

Bununla birlikte, W3Schools ve başka yerlerde okuduktan sonra, bu kavramlara yeterince basit bir girişin sadece kendimin değil, aynı zamanda Elegant Themes okuyucularının da büyük bir kısmının kavrayışı içinde olduğunu düşünüyorum.

Başlangıç ​​olarak, örneklere ve kodlara geçmeden önce CSS geçişlerinin ve animasyonlarının tam olarak ne olduğu konusunda gerçekten iyi bir fikre sahip olmamız gerektiğini düşünüyorum.

CSS Geçişleri

CSS geçişi, belirlediğiniz belirli bir süre boyunca bir öğenin özellik değerlerini değiştirmenize olanak tanır. Bir geçiş oluşturmak için önce hangi CSS özelliğine efekt eklemek istediğinizi belirlemeli ve ardından efektin süresini belirtmelisiniz. Süre ayarlanmazsa geçiş gerçekleşmez.

Dört geçiş özelliği vardır:

geçiş gecikmesi – geçiş efektinizi atamak istediğiniz gecikmeyi saniye (sn) cinsinden belirtir.

geçiş süresi – geçiş efektinizi atamak istediğiniz süreyi saniye (s) veya milisaniye (ms) olarak belirtir.

geçiş özelliği – geçiş efektinizin amaçlandığı CSS özelliğinin adını belirtir.

geçiş-zamanlama-fonksiyonu – Geçiş efektinin hız eğrisini belirtir. Anlamı, geçiş efektiniz için seçmek istediğiniz hız değişimi türü. “Hızlı” veya “yavaş” seçenekleri yoktur. Bunun yerine bir hızdan diğerine giden hız eğrisi seçenekleri vardır. Efektinizin yavaş başlamasını, sonra hızlı gitmesini ve sonra yavaş bitmesini söyleyen “kolaylık” gibi.

Bir geçiş oluşturmak için, seçtiğiniz süre boyunca bu özelliklerden yalnızca birini değiştirmeniz yeterlidir. Ancak aynı anda birden fazla özelliği değiştirmek mümkündür; daha dramatik geçişler sağlar.

CSS Animasyonları

CSS geçişlerinin bir durumdan duruma geçerken öğe özelliklerini değiştirmekle ilgili olduğu durumlarda, CSS animasyonları ana karelere ve animasyon özelliklerine bağlıdır.

ana kareler – ana kareler, bir öğenin çeşitli zamanlarda sahip olacağı stilleri tanımlamak için kullanılır.

animasyon özellikleri – animasyon özellikleri, belirli bir öğeye @anahtar kareler atamak ve nasıl canlandırılacağını belirlemek için kullanılır.

Sekiz animasyon özelliği vardır:

animasyon gecikmesi – bir animasyonun başlaması için bir gecikme belirtir.

animasyon-yön – bir animasyonun ters yönde mi yoksa alternatif döngülerde mi oynatılacağını belirtir.

animasyon süresi – bir animasyonun bir döngüyü tamamlamak için kaç saniye veya milisaniye sürdüğünü belirtir.

animasyon doldurma modu – animasyon oynatılmadığında öğe için bir stil belirtir. Bittiğinde veya bir gecikme olduğunda olduğu gibi.

animasyon-yineleme-sayısı – bir animasyonun kaç kez oynatılması gerektiğini belirtir.

animasyon-adı – @keyframes animasyonunun adını belirtir.

animasyon-oynatma-durumu – animasyonun çalışıp çalışmadığını veya duraklatıldığını belirtir.

animasyon-zamanlama-fonksiyonu – animasyonun hız eğrisini belirtir.

Aşağıdaki örnekler, bu şeylerin çeşitli şekillerde birlikte nasıl kullanıldığını size gösterecektir. Aralarındaki ilişkileri anladıktan sonra, onları kullanmanın her türlü ilginç yolunu bulabileceksiniz.

Satıcı Önekleri Üzerine Hızlı Bir Not

CSS geçişlerini ve animasyonlarını kişisel kullanımınızda büyük olasılıkla satıcı öneklerini kullanmanız gerekecektir. Aşağıdaki kodların bazılarında şüphesiz bazı satıcı öneklerini fark edeceksiniz. Kaynak örneklerin çoğu satıcı öneklerini içermez, bu nedenle kodun onlarsız nasıl göründüğünü görmek istiyorsanız oraya bakabilirsiniz; Tam bir resim sağlamanın yararlı olabileceğini düşündüm.

Deneyimsiz olanlar için, “satıcı öneki” dediğimde, geçişlerinizi ve animasyonlarınızı desteklemek istediğiniz tarayıcı aralığına göre CSS'nize eklenmesi gereken bir önekten bahsediyorum.

Her tarayıcı için gerekli önekleri belirlemek için iyi bir kaynak caniuse.com'dur. Ayrıca W3Schools'da geçişler ve animasyonlar için ilgili sayfalara göz atabilirsiniz. Veya önek karmaşasından tamamen kaçınmak istiyorsanız, Bourbon.io gibi bir araç kullanabilirsiniz.

CSS Geçiş Örnekleri

Aşağıdaki CSS geçiş örneklerinin tümü, bu nispeten yeni CSS yetenekleriyle nelerin mümkün olduğunu gösteren çeşitli kaynaklardan bulduğum geçişlerdir. CodePen kullanarak bulduğum örnekleri yeniden oluşturmayı seçtim, böylece her örnek için gereken HTML ve CSS'de kolayca zirveye ulaşabilir ve aynı zamanda onu çalışırken de görebilirsiniz.
1. Doğrusal

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan Pen MwJaQr'a bakın.

Örnek yoluyla.

2. Döndür

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan Pen doNYmE'ye bakın.

Örnek yoluyla.

3. Renk

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan OVWyZN kalemine bakın.

Örnek yoluyla.

4. Kareden Daireye

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan WvRQJp'ye bakın.

Örnek yoluyla.

5. Kart

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan zGNvjL kalemine bakın.

Örnek yoluyla.

CSS Animasyon Örnekleri

Yine, aşağıdaki CSS animasyon örnekleri web'deki çeşitli kaynaklardan alınmıştır. Tıpkı yukarıdaki gibi, CodePen, animasyonu ve gerekli kodu tek bir yerde görmenizi sağlar. Her örnek hakkında (bazı durumlarda) daha fazla bilgi almak için kaynak bağlantılarımı da takip edebilirsiniz.
1. Nabız

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan kalem pJRyEz'e bakın.

Örnek yoluyla.

2. sallayın

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan QbdNER kalemine bakın.

Örnek yoluyla.

3. Zıplama

CodePen'de nathan (@nathanbweller) tarafından kalem wagGWR'ye bakın.

Örnek yoluyla.

4. Zıpla

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan GJrZqG Kalemine bakın.

Örnek yoluyla.

5. Doğrusal Çubuk

CodePen'de nathan (@nathanbweller) tarafından kaleme alınan qdRZNm kalemine bakın.

Örnek yoluyla.

CSS Geçişleri ve Animasyonları için Olası Kullanım Örnekleri

Yukarıda bahsettiğim gibi, CSS geçişleri ve animasyonları, web sitenizde ilgi çekici ve keyifli mikro etkileşimler oluşturmak için idealdir. Birçok harika WordPress teması ve eklentisi, bu davranışların bazılarıyla birlikte gelir. Modül kontrolleri içinde geçişleri ve animasyonları kontrol etmenizi sağlayan Divi Builder'a iyi bir örnek.

Bununla birlikte, yukarıdaki temel bilgileri almak ve bunları sitenizin, bir tema veya eklenti yazarının size üzerinde kolay kontrol sağlayamadığı diğer alanlarına uygulamak isteyebilirsiniz. Aşağıdaki fikirler başlamanıza yardımcı olabilir.

• Keyifli bir giriş yapan ve var olan bir e-posta katılım formu; sıçramak ve kaybolmak için kapanmak gibi.
• Temel bilgiler olmadığında ve birisi onu bitmiş olarak göndermeye çalıştığında sallanan bir form.
• Açılan, zıplayan, sallanan veya başka bir şekilde katlanan düğmeler, gezinme ve tıklamaya yanıt verir.
• Daha fazla bilgi ortaya çıkarmak için dönen görüntüleri önizleyin.
• Hareket eden, derinlik yaratan zarif arka plan grafikleri.
• Yüklendikçe harekete geçen güzel grafikler.
• Google Doodle stili deneyler, logolar ve daha fazlası.
• Oyunlar (gerçekten iddialı olanlar için).
• Etkileşimde bulunabileceğiniz veya dikkat çekmek için şekil değiştiren reklamlar.
• Dönen ve fareye yanıt veren güzel ürün ekranları.
• Güzel stat sayaçları.
• Ve hayal gücünüzün aklına gelebilecek başka ne varsa.

CSS Geçişleri ve Animasyonlarının İlham Veren Vitrinleri

Bir fikir listesinden daha fazla görsel uyarana ihtiyacınız varsa, yukarıda oluşturduğum oldukça basit örneklerde gösterilen potansiyeli göstereceğini umduğum, ilham verici CSS geçişleri ve animasyonlarından oluşan küçük ama etkileyici bir vitrin derleme özgürlüğüne sahibim.

Saf CSS'de Logolar

Pure CSS'deki Logolar, CSS'den başka bir şey olmadan yeniden oluşturulmuş dünyaca ünlü logoların harika bir vitrinidir. Mevcut formlarında, nasıl yapıldıklarını ve geleneksel muadillerine karşı nasıl biriktiklerini göstermek için animasyonlar ve geçişler kullanıyorlar. Ancak, yalnızca logonuzu HTML/CSS'de oluşturmanın birçok ilginç olasılık açtığını belirtmek önemli.

Pure CSS'de Logolara Git

CSS A/Z

CSS A/Z, HTML/CSS animasyonlu eskizlerin bir vitrinidir; alfabenin her harfi için bir tane. Web sitenizde görünüşte önemsiz olan öğeleri süslemek için harika şeyler ve birçok fikir.

CSS A/Z'ye git

Çift Yüzük

Double Ring, logoyu daha göz alıcı ve ilgi çekici hale getirmek için yapabileceğiniz harika bir örnek bence.

Çift Zil'e git

Gezinti çubuğu

Gezinme Çubuğu, gelişmiş CSS sevgisi verildiğinde gezinme gibi standart bir şeyin ne kadar dinamik ve güzel olabileceğinin bir örneğidir.

Gezinme Çubuğuna Git

Parçalar halinde

In Pieces, CSS animasyonunun muhteşem (ve oldukça karmaşık) bir kullanım durumudur. 30 hayvan türünün evriminin interaktif bir sergisidir. Gerçekten nefes kesici ve bir CSS aracının ne kadar güçlü olabileceğinin harika bir göstergesi.

Parçalar halinde git

Ek Kaynaklar ve Eğitimler

CSS geçişlerinde ve animasyonlarında ustalaşma arayışınızda, bu yazıda sunabileceğimden daha fazla ayrıntıya ihtiyacınız olacak veya isteyeceksiniz. Ek olarak, başka birinin yazı stili sizin düşünce tarzınıza daha uygun olabilir. Bu nedenle, faydalanmanız için aşağıda diğer faydalı kaynakların ve öğreticilerin kısa bir listesini derledim.

• W3Schools Geçişleri
• W3Schools Animasyonları
• Shay Howe Gelişmiş HTML ve CSS Kodlamayı Öğreniyor
• CSS Şekilleri 101
• Yeni Başlayanlar için CSS Animasyonu
• Basit CSS3 Geçişleri, Dönüşümleri ve Animasyon Derlemesi
• Hover.css – CSS3 destekli vurgulu efektler koleksiyonu
• Animate.css
• Düğmeler
• Hint.css
• Color.css
• Görmeniz Gereken 30 Harika CSS Animasyonu

Sonuç olarak

CSS geçişleri ve animasyonları, son derece kullanışlı ve çok yönlü bir dizi yetenektir. Küçük ince şeyler veya yüzünüzde büyük etkileyici şeyler yapabilirsiniz. Ancak her iki durumda da, her şey temellere hakim olmak ve oradan devam etmekle başlar.

Umarım bu yazı, CSS ile ilgili daha fazla içerik talep edenler için hoş bir tempo değişikliğidir. Bu gönderi veya gelecekteki gönderiler hakkında daha fazla düşünceniz veya isteğiniz varsa, lütfen aşağıdaki yorumlar bölümünde bize bir satır bırakmaktan çekinmeyin.

TCmakephoto üzerinden Makale Küçük Resmi // Shutterstock.com