CSS Animasyonları ve Geçişleri ile Web Sayfalarınızı Canlandırın

Web sitesi tasarımları sürekli gelişmektedir. Duyarlı tasarım, güzel tipografi, mükemmel renk kodlama şemaları, çizimler, web sitesi yaratıcıları her gün yeni fikirler ve tasarımlar ile geliyor.

Günümüzde kullanıcılar, internet üzerinden sunulan bu tür yüksek kaliteli içerik nedeniyle kullanıcı arayüzlerinden yüksek beklentilere sahiptir. Web sitesi arayüzleri geliştikçe arkalarındaki teknoloji de gelişiyor. Web sitesi arayüzünü geliştirmekten sorumlu ana bileşenlerden biri CSS'dir .

CSS veya Basamaklı Stil Sayfaları, sitelerin stilini, düzenini, tasarımlarını tanımlayarak daha etkileşimli hale getirmekten sorumludur. CSS için en son standart olan CSS3, kullanıcı arayüzüne ekstra derinlik ekleyerek kullanıcı deneyimini geliştiren animasyonlar ve dönüşümler kavramını tanıttı. CSS animasyonları ve geçişleri ile hikayeler anlatabilir, cömert efektler oluşturabilir ve web sitenizle kullanıcı etkileşimini çok daha etkili ve anlamlı hale getirebilirsiniz.

Animasyon, resimler gibi bir dizi nesnenin birbiri ardına görüntülenmesiyle oluşturulan bir hareket simülasyonudur. Öte yandan geçiş, temelde bir nesnenin bir durumdan diğerine değiştiği bir süreçtir. Ancak, web animasyonları hakkında konuştuğumuzda temelde üç tür vardır – CSS animasyonları veya ana kare animasyonları, CSS geçişleri ve JavaScript animasyonları .

CSS Animasyonları

CSS'de animasyon oluşturmak için resim veya metin gibi bir öğenin CSS özelliklerini belirli bir süre boyunca değiştirmemiz gerekir. Elementlerin özelliklerini istediğimiz kadar değiştirebilir ve animasyonun süresini de ayarlayabiliriz.

@anahtar kareleri belirtme

CSS animasyonları, anahtar karelerle tanımlanır. Bu anahtar kareler, animasyonun ara noktalarıdır. Tüm CSS animasyonları @keyframes kuralı altında belirtilir. Bu anahtar kareler, belirli bir anda öğeye ne olduğunu belirtir;

• hangi özellikler değişiyor
• eleman canlandığında
• eleman nasıl canlanır

Kendi ana karenizi şu şekilde tanımlayabilirsiniz:

[css]
@keyframes animasyon_adı
{
from{ özellik: değer; }
to{ özellik: değer; }
}
[/css]

Burada 'to' ve 'from', animasyonun başlangıcını ve sonunu belirtir. Başlangıç ​​ve bitiş arasındaki ara anlar için animasyonları da şu şekilde belirtebiliriz:

[css]
@ana kare adı
{
0%{ özellik: değer; }
%50{ özellik: değer; }
%100{ özellik: değer; }
}
[/css]

Burada %0, animasyonun başlangıcını, %100 animasyonun sonunu ve %50, başlangıç ​​ve bitiş arasındaki değişikliği ifade eder. Ancak, tarayıcıya animasyonun ne kadar süre geçmesi gerektiğini nasıl söyleriz? Bunu belirli animasyon özellikleri yardımıyla yapıyoruz. Bu animasyon özellikleri, canlandırılacak öğeyle ilişkilendirilir. Örneğin:

[css]
eleman_adı
{
animasyon_özelliği: değer;
style_property: değer;
}
[/css]

Burada eleman, div, span, img, p vb. gibi herhangi bir HTML etiketi olabilir ve style_property , arka plan_renk, genişlik, yükseklik vb. gibi herhangi bir CSS stil özelliğidir. Şimdi bazı animasyon özelliklerine ayrıntılı olarak bakalım.

1. @keyframes : Ana kareler, yukarıda tartışıldığı gibi animasyon kodunu belirtmek için kullanılır.
2. animasyon-adı : @keyframes ile belirtilen ad, animasyonun adıdır. Bu ad, canlandırılacak öğeyle birlikte ana karelere başvurmak için kullanılır.
3. animasyon-duration : Animasyonun süresini saniye veya milisaniye olarak belirtmek için kullanılır. Örneğin, 5 saniyeye ayarlarsak, animasyon sadece 5 saniye çalışacaktır. Bu özelliği ayarlamazsak, varsayılan değeri 0 olduğu için animasyon hiç çalışmayacaktır.
4. animasyon-gecikme : Animasyon-gecikme süresini belirterek animasyonun başlamasını geciktirebiliriz. Örneğin, sayfa tarayıcıya yüklendikten 5 saniye sonra animasyonu başlatmak istiyorsanız, animasyon gecikmesini 5s olarak ayarlamanız yeterlidir.
5. animasyon-yön : Bu özellik ile tarayıcıya bir animasyonun ters yönde mi yoksa dönüşümlü döngülerde mi hareket ettiğini söyleyebiliriz. Örneğin, animasyonun baştan sona çalışmasını istiyorsanız, animasyon süresinin değerini 'normal' olarak ayarlayın. Baştan sona çalışmasını istiyorsanız, değeri 'ters' olarak ayarlayın.
6. animasyon-doldurma modu : Animasyon bu modda oynatılmadığında, yani animasyon geciktiğinde veya bittiğinde öğenin stilini belirleyebiliriz, ardından öğenin stili ne olmalıdır.
7. animasyon-yineleme-sayısı : Bir animasyonun kaç kez oynatılabileceği bu özellik tarafından temsil edilir. Örneğin, animasyonu bir kez oynatmak istiyorsanız 1'e ayarlayın veya animasyonun sonsuza kadar oynamasını istiyorsanız 'sonsuz' olarak ayarlayın.
8. animasyon-zamanlama-fonksiyonu : Bu özellik, doğrusal, hızlanma veya hız kesme gibi animasyonun hız eğrisini belirtmek için kullanılır.
9. Animasyon : Tüm animasyon özelliklerini ayarlamak için kullanılan kısayol özelliğidir.

Örneğin, aşağıdaki kod parçacığıyla zıplayan bir nesneyi canlandırabilirsiniz. Animasyon için stenografi notasyonun burada nasıl kullanıldığına dikkat edin.

[css]
@keyframes slayt {
%0 {
sol: 0;
üst: 0;
}
%50 {
sol: 244 piksel;
üst: 100 piksel;
}
100% {
sol: 488 piksel;
üst: 0;
}
}

.stage:hover .object {
animasyon: slayt 2s doğrusal; /*stenografi animasyon özelliği*/
}

.nesne {
arka plan: #2db34a;
sınır yarıçapı: %50;
yükseklik: 50 piksel;
konum: mutlak;
genişlik: 50 piksel;
}
[/css]

geçişler

CSS geçişleri, belirli zamanlama işlevlerine , yani hareket hızı işlevlerine dayalı olarak belirli bir süre boyunca öğelerin özelliklerine uygulanır. Zamanlama işleviyle, doğrusal ilerleme, hızlanma veya hızlanma gibi öğelerin özelliklerini bir durumdan diğerine değiştirecek bir işlevi kastediyoruz. Fareyle üzerine gelindiğinde bir görüntünün kaydığını veya başka bir görüntüye dönüştüğünü veya fare tıklamasıyla bir sesin çaldığını fark etmiş olabilirsiniz. Bunların hepsi bir web sitesini etkileşimli hale getirebilecek geçiş efektleridir.

Hareket hızı işlevleri , geçişler oluşturmak için önemlidir. Özelliklerin nasıl değişeceğini belirtirler. Ayrıca, bir geçişin başlangıç ​​noktasından bitiş noktasına kadar özelliklerin değerinin değişme hızını da değiştirebilirler. Geçişleri aşağıdaki şekilde uygulayabilirsiniz:

[css]
eleman
{
style_property: değer;
geçiş_özelliği: değer;
}
[/css]

Burada öğe, dönüştürmek istediğiniz div, H1, img vb. gibi HTML öğesini belirtir. style_property, o öğeye uygulanan CSS stilidir. Şimdi bazı geçiş özelliklerine bakalım:

• geçiş özelliği : Geçiş efekti her zaman bir öğenin genişliği, yüksekliği, rengi veya şekli gibi CSS özelliğine uygulanacaktır. Bu özniteliğin değeri, öğenin o CSS özelliğini belirtir. Geçiş efekti, örneğin fareyle üzerine gelindiğinde veya tıklandığında bu özellik her değiştiğinde başlayacaktır.
• geçiş-zamanlama-fonksiyonu : Bu, elemana uygulanacak kolaylık fonksiyonudur. Bu özellik, kolaylaştırma, kolaylaştırma, doğrusal vb. geçiş hız eğrisini belirtmek için kullanılır.
• geçiş süresi : Tıpkı animasyon süresi özelliği gibidir. Geçiş efektinin süresini saniye veya milisaniye olarak belirtmek için kullanılır. Örneğin, 5 saniyeye ayarlarsak, geçişi etkileyecek ve 5 saniyede tamamlanacaktır. Bu özelliği ayarlamazsak, varsayılan değeri 0 olduğu için hiçbir geçiş olmayacaktır.
• geçiş-gecikme : Bu özellik ile geçiş etkisinin geciktirileceği süreyi belirtebiliriz. Örneğin, efekti fare üzerine geldikten 5 saniye sonra başlatmak istiyorsanız, geçiş gecikmesini 5s olarak ayarlamanız yeterlidir.
• geçiş : Yukarıdaki tüm geçiş özelliklerini birlikte ayarlamak için kısayol özelliğidir.

Örneğin, aşağıdaki kod, fareyle üzerine gelindiğinde div öğesinin genişliğini değiştirecektir. Burada uygulanan geçiş stenografi özelliğine bakın.

[css]
div {
genişlik: 50 piksel;
yükseklik: 50 piksel;
arka plan: mavi;
geçiş: yükseklik 4s; /*yükseklik 4 saniyeliğine geçiş kısayolu*/
}
div:hover {
yükseklik: 200 piksel; /* fareyle üzerine gelindiğinde yüksekliği artır */
}
[/css]

Animasyonlar ve Geçişler

Animasyonlar ve Geçişler Arasındaki Benzerlikler

• Bir öğenin özelliklerindeki değişiklikleri görselleştirmek için hem geçiş hem de animasyon kullanılır.
• Geçiş ve animasyonun ne kadar sürmesi gerektiğini belirtebiliriz.
• Animasyonların yanı sıra geçişler için bir değerden diğerine geçiş hızını değiştirmek için belirli zamanlama fonksiyonlarına sahibiz.

Animasyonlar ve Geçişler Arasındaki Farklar

• CSS geçişleri reaktiftir . Kullanıcılar tarafından tetiklenmeleri gerekir. Animasyonlar ise sayfa tarayıcıya yüklendiğinde çalışır. Tetiklenmeleri gerekli değildir.
• Geçişler bir kez çalışır ve sonra durur. Ardından, animasyonlar döngüye girebilirken onları tekrar tekrar tetiklemeliyiz. Kendi duraklarında başlayıp tekrar başlayabilirler.
• Tarayıcı, geçişlerin kendisi ile ilgilenir. Sadece geçişin başlangıcını ve sonunu belirtmemiz gerekiyor. Geçiş etkisini ayarlayabiliriz ancak aradaki geçişin değişim hızını değiştiremeyiz. Örneğin, bir görüntü fareyle üzerine gelindiğinde kayarsa, üzerine geldiğimizde yalnızca solduğunu veya kaybolduğunu görürüz.
• Animasyonlar ise başlangıç ​​ve bitiş arasındaki özellikleri değiştirme esnekliği sağlar. Bu, anahtar karelerin yardımıyla olur. Örneğin, bir görüntünün rengini animasyonun ilk 5 saniyesi kırmızı, sonraki 5 saniyesi mavi, sonraki 5 saniyesi yeşil ve son 5 saniyesi için sarı olarak ayarlayabiliriz. Bu nedenle, animasyonlar üzerinde bir kontrolümüz var.

Satıcı Önekleri

Tüm CSS3 özellikleri her tarayıcı tarafından desteklenmez. Bu nedenle, -webkit- (Safari), -moz- (Firefox) veya -o- (Opera) gibi belirli tarayıcılar için bu CSS özellikleri boyunca önekler kullanırız. Bu, tarayıcı işaretçilerinin bu CSS3 özelliği için bir destek eklemesini sağlar. Bu önekler, satıcı önekleri veya CSS Tarayıcı önekleri olarak bilinir. Bu nedenle, animasyon ve geçiş özellikleriyle birlikte satıcı öneklerini de koymamız gerekiyor. Örneğin, aşağıdaki kodu inceleyin ve Safari için satıcı öneklerinin nasıl kullanıldığını görün:

[css]
div {
genişlik: 100 piksel;
yükseklik: 100 piksel;
arka plan: kırmızı;

/* Safari 3.1 ila 6.0 için */
-webkit-geçiş-özelliği: genişlik;
-webkit-geçiş-süresi: 2s;
-webkit-geçiş-zamanlama-fonksiyonu: doğrusal;
-webkit-geçiş-gecikmesi: 1s;

/* Standart sözdizimi */
geçiş özelliği: genişlik;
geçiş süresi: 2s;
geçiş-zamanlama-fonksiyonu: doğrusal;
geçiş gecikmesi: 1s;
}
[/css]

Uç! -prefix-free gibi kitaplıkları kullanarak bu karmaşadan kurtulabilirsiniz. Herhangi bir CSS koduna mevcut tarayıcının önekini ekleyecek bir JavaScript kitaplığıdır. Web'de bulunan bu tür birçok kütüphaneye göz atın.

Çözüm

Web sitesi geliştiricileri, kullanıcıları web sitelerinize çekmek için animasyonlar ve dönüşümler uygulayabilir. Bunları formları, bildirimleri, arka plan grafiklerini, görüntüleri, çizelgeleri, karalamaları, harekete geçirici mesaj düğmelerini ve diğerlerini geliştirmek için kullanabilirsiniz. Sadece hayal gücünüzü kullanın ve kullanıcılarınızı şaşırtmanın bir yolunu bulun. Web sitenizdeki küçük bir değişikliğin bile çok daha iyi görünmesini ve değerini artırabileceğini unutmayın. Peki, web siteniz üzerinde henüz animasyon kullandınız mı? Animasyonları ve geçişleri kullanma hakkındaki düşüncelerinizi paylaşın.