CSS animasyon yönü özelliği nedir: Bilmeniz gereken her şey

Sizce CSS sadece animasyon oluşturmak için mi kullanılıyor? Gerçekten de öyle, ancak bununla birlikte hızı, süreyi, yönü, başlangıç ​​zamanını vb. kontrol etmek için CSS'yi de kullanabilirsiniz.

Animasyonunuzun yukarı veya aşağı yönde hareket etmesini isteseniz de, web geliştirmede CSS animasyon yönü özelliği, hedeflerinize ulaşmanıza izin verecektir.

Bu konuda yeni misin? Üzülmene gerek yok! Bu blogda, CSS animasyon özellikleri hakkında her şeyi öğreneceksiniz.

Şimdi lafı daha fazla uzatmadan CSS animasyonunun ne olduğunu ve kullanımını anlayalım.

CSS animasyon yönü özelliği nedir?

CSS animasyon yönü özelliği, tamamen animasyonun yönü ile ilgilidir. Bu özelliği ayarladıktan sonra, animasyon döngüsünü geriye, ileriye veya alternatif bir yönde kolayca ayarlayabilirsiniz.

Şimdi, farklı animasyon yönlerine bir göz atalım:

• animasyon yönü: normal;
• animasyon yönü: ters;
• animasyon yönü: alternatif-ters;
• animasyon yönü: alternatif;

Size daha fazla yardımcı olmak için animasyon yönü özelliği sözdizimini paylaştım. Umarım bu sözdizimi bir profesyonel gibi animasyonlar oluşturmanıza yardımcı olur.

/* CSS animasyon özelliğinin Tek animasyonu */

• animasyon yönü: normal;
• animasyon yönü: ters;
• animasyon yönü: alternatif;
• animasyon yönü: alternatif-ters;

/* CSS animasyon özelliğinin Çoklu animasyonları */

• animasyon yönü: normal, ters;
• animasyon yönü: alternatif, ters, normal;

/* CSS animasyon özelliğinin Global değerleri */

• animasyon yönü: miras;
• animasyon yönü: başlangıç;
• animasyon yönü: geri al;
• animasyon yönü: ayarlanmamış;

Artık farklı CSS animasyon özelliklerini bildiğinize göre, CSS Animasyon özelliklerinin değerlerini anlamanın zamanı geldi.

CSS Animasyon özelliği Değerleri

Normal

Bu özelliği kullanırsanız, animasyon ileriye doğru oynatılacaktır. Bu, her animasyon döngüsü için animasyonun başlangıç ​​durumuna sıfırlanacağı ve yeniden başlayacağı anlamına gelir.

-" Normal" değeri temel olarak CSS'deki animasyon yönü özelliğinin varsayılan değeridir. Bu nedenle, bu özelliği ayarlamazsanız, varsayılan olarak ileriye doğru oynayacaktır.

Tersi

Ters animasyon, her döngüde ters yönde yapılan animasyonlarla ilgilidir. Bu stilde animasyon adımları ve zamanlama fonksiyonları geriye doğru gerçekleştirilir.

Örneğin, bir kolaylaştırma zamanlaması işlevi, kolaylaştırma haline gelir.

Alternatif

Alternatif animasyon, ilk yineleme ileri yönde olacak şekilde her döngüde yönü tersine çevirir . Sayım, bir döngünün tek mi çift mi olduğunu belirlemektir.

alternatif-ters

Alternatif-ters, ilk yineleme geriye doğru oynatılarak her döngünün yönünü tersine çevirir . Sayım, bir döngüden başlayarak bir döngünün çift mi yoksa tek mi olduğunu belirlemektir.

Animasyon yönü için CSS Shorthand

Animasyon kısayolu CSS özelliğini kullanarak yapılabilecek animasyon yönü de dahil olmak üzere çeşitli animasyon özelliklerini ayarlayabileceğinizi öğrenince şaşıracaksınız.

CSS animasyonu stenografi özelliği, animasyonu stiller arasında uygular. Animasyon-adı, animasyon-süresi, animasyon-zamanlama-fonksiyonu, animasyon-gecikmesi, animasyon-yineleme-sayısı, animasyon-yön, animasyon-doldurma-modu ve animasyon-oynatma- gibi tüm animasyon özelliklerini ayarlamak için kestirme bir yöntemdir. durum.

Yaygın CSS Animasyon Sorunları

Animasyonunuz istediğiniz gibi çalışmıyor veya hiç çalışmıyor, sorunların bazı nedenleri ve bunların nasıl çözüleceği aşağıda açıklanmıştır:

@keyframes kuralı yok

CSS animasyonlarında @keyframes kuralı, animasyonun nasıl görüneceğini tanımlar. Daha spesifik olarak, hangi eleman stillerinin ne zaman değişeceğini tanımlar. Bu kural olmadan, öğenizin kullanacağı herhangi bir animasyon olmayacaktır. Bu nedenle, bir dahaki sefere, @keyframes kuralınızın var olup olmadığını ve adının hedeflenen öğenin animasyon adıyla eşleşip eşleşmediğini kontrol edin.

Animasyon süresi ayarlanmadı

Öğeye bir ana kare kuralı atadığınızı varsayalım, ancak bir animasyon süresi ayarlamadıysanız yine de oynatılmıyor gibi görünüyor. Varsayılan olarak, CSS animasyon döngüsü sıfır saniye uzunluğundadır.

Bu döngüyü geçersiz kılmak için, tıpkı animasyon adıyla aynı blokta olduğu gibi, hedeflenen öğenize bir saniye değeriyle bir animasyon süresi kuralı eklemeniz gerekir.

Animasyon çok erken başlıyor

Bazen daha yüksek bir tüketici deneyimi için animasyonun başlangıcından önce hızlı bir erteleme yapmanız gerekebilir. Animasyon-erteleme eşyaları ile bunu gerçekleştirin.

Canlandırılamayan CSS özellikleri

Animasyonun çalışmamasının bir başka nedeni de, canlandırılabilir olmayan bir CSS özelliğini canlandırmaya çalışıyor olmanız olabilir.

CSS Animasyonu desteklenmiyor

CSS, günümüzün maksimum mobil ve bilgisayar tarayıcılarında resimleri canlandırıyor. Ancak, eski bir tarayıcı kullanıyorsanız veya tarayıcınızın birkaç yıldır güncel olmayan bir modelini kullanıyorsanız, şüphesiz tarayıcı yardımının kaybından dolayı animasyonlarınız çalışmayacaktır.

Tarayıcıyı güncellediyseniz ve yine de sorun yaşıyorsanız, orijinal politikalarınızda daha fazla tedarikçi önekleriyle animasyon politikalarınızı eklemeyi deneyin ve animasyonu yeniden deneyin.

CSS Shorthand yanlış yazılmış

CSS steno, temizleyici CSS yazmanın ve dosyanızdaki kod miktarını azaltmanın mükemmel bir yoludur. Animasyon eşyaları, bu CSS evlerinin kısaltmasıdır:

• animasyon dönemi
• animasyon çağrısı
• animasyon-erteleme
• animasyon yönü
• animasyon doldurma modu
• animasyon-yineleme-güven
• animasyon-oyun-ulus
• Animasyon-zamanlama-fonksiyonu

Biri animasyon dönemi için diğeri animasyon çağrısı için olmak üzere iki değer gereklidir. Bunların yanı sıra değerlerin sırası, hangi animasyon eşyalarına hangi fiyatın atanacağını belirler.

Yanlış hizalanmış değerler, beklediğinizden farklı davranan bir animasyona yol açmalıdır. Bu nedenle, animasyon stenografisinin kullanımı aitse, değerlerinin doğru sırada dizine eklendiğinden emin olun.

Yavaş Performans

CSS animasyonları, genel performans için farklı türdeki internet animasyonlarından daha yüksek olma eğilimindedir. Ancak, artık tüm CSS animasyonları eşit değildir ve birkaç canlı desen, genel performansı kademeli olarak diğerlerinden daha fazla düşürür.

Çoğu kolay CSS animasyonu, web sayfası yükleme süreleri üzerinde önemli bir etkiye sahip değildir. Ancak, animasyonunuza ne kadar büyük sonuçlar yüklerseniz, genel performans sorunlarıyla karşılaşma olasılığınız o kadar artar.

Kötü genel performanstan uzak durmak için Google, yeniden boyamaya neden olan animasyonları kullanmanızı kısıtlamanızı önerir. Bir boya, bir internet web sayfasının görünür görüntüsünü oluşturan tarayıcı iken, ekranda piksel kullanımı yardımıyla pikseldir. Boyalar kayda değer miktarda işlem gücü kullanır, bu nedenle animasyonlar nedeniyle çok çeşitli yeniden boyamaları olabildiğince kısıtlamanız gerekir.

Ne yazık ki, maksimum canlandırılabilir CSS evleri değiştirilirken yeniden boyamaya neden olur. Genel performans üzerinde minimum etkiyle canlı olabilen bu dönüşüm (ölçek, döndürme ve konum gibi şeyler için) ve opaklığın istisnaları. İşte CSS evlerinin canlıyken yeniden boyamaya neden olduğu bir referans.

Yine de, bunun sizi animasyonları tamamen çöpe atmaktan caydırmasına izin vermeyin. Hız sorunları yaşıyorsanız, bunun nedeni büyük olasılıkla birçoğunu hemen yürütmek veya animasyonu en az bir büyük ayrıntıya veya öğe organizasyonuna kadar kullanmak istemenizdir.

Web sitelerinde, CSS animasyonları birinci sınıf olmakla birlikte, deneyimi güzelleştirmek için ustaca kullanılırlar, bu nedenle ziyaretçilerle etkileşim kurmak için karmaşık bir animasyon isteyip istemediğinizi hatırlayın.

son söz

Evet, HubSpot doğru CSS kodunu kullanarak animasyonların yönünü kontrol etmenizi sağlar. Peki! CSS animasyon yönü özelliğinin birçok insanın bilmediği bir şey olduğuna tamamen katılıyorum.

Ancak evet, bu blogu okuduktan sonra, animasyonları nasıl kontrol edebileceğinizi ve web sitenizin tasarımına çekici ve kullanıcı dostu bir görünüm kazandırabileceğinizi kesinlikle öğreneceksiniz. Peki, ne bekliyorsun? Hedef kitlenize hitap eden bir tasarım oluşturmaya hazır olun.

Hala bir site tasarlama konusunda yardıma ihtiyacınız var, bizimle iletişime geçmekten çekinmeyin. Uzmanlarımız aynı konuda size yardımcı olacaktır.

Editör: Divya