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ş, temel olarak 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 bit olarak 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:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

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:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

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:

element_name
{
animation_property: value;
style_property: value;
}

Burada eleman div, span, img, p vb. gibi herhangi bir HTML etiketi olabilir ve style_property , background_color, width, height 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 belirtebiliriz, 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.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

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şlevi ile, 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:

element 
{
style_property: value;
transition_property: value;
}

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.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

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çme 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:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

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 bulabilirsiniz. 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, henüz web siteniz üzerinde animasyon kullandınız mı? Animasyonları ve geçişleri kullanma hakkındaki düşüncelerinizi paylaşın.