CSS Animasyonları ve Geçişler

[GUNNERIUS]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

CSS Animasyonları ve Geçişler (Transitions), web sayfalarına dinamik ve etkileşimli görsel efektler eklemek için kullanılan iki önemli tekniktir. Bu teknikler, kullanıcı deneyimini zenginleştirir ve sitenizi daha çekici hale getirir. İşte bu iki konu hakkında detaylı bilgiler:

​

CSS Geçişler (Transitions)​

Geçişler, bir CSS özelliğinin belirli bir süre içinde bir durumdan diğerine değişmesini sağlar. Örneğin, bir öğenin renginin, boyutunun veya konumunun yavaşça değişmesi gibi. Geçişler, kullanıcı etkileşimlerine (hover, focus, click) yanıt olarak animasyonlar oluşturmak için idealdir.
​

Temel Kullanım:​

Bir geçişi tanımlamak için transition özelliği kullanılır. Bu özellik, hangi CSS özelliğinin, ne kadar sürede, hangi hız eğrisiyle ve hangi gecikmeyle değişeceğini belirler.


.button {
background-color: blue;
transition: background-color 0.5s ease;
}

.button:hover {
background-color: green;
}

Bu örnekte, .button sınıfına sahip öğe üzerine gelindiğinde arka plan renginin 0.5 saniye içinde mavi renkten yeşile geçiş yaptığı görülecektir.
​

Geçiş Özellikleri:​

transition-property: Geçişin uygulanacağı CSS özelliğini belirtir (örneğin, background-color, width).
transition-duration: Geçiş süresini belirler (örneğin, 0.5s, 2s).
transition-timing-function: Geçişin hız eğrisini belirtir (örneğin, ease, linear, ease-in, ease-out, cubic-bezier).
transition-delay: Geçiş başlamadan önceki gecikme süresini belirler (örneğin, 0s, 1s).​

CSS Animasyonları (Animations)​

Animasyonlar, bir öğenin belirli anahtar kareler (keyframes) arasında belirli bir süre içinde değişmesini sağlar. Geçişlerden farklı olarak, animasyonlar daha karmaşık ve çok aşamalı değişiklikler için kullanılır.
​

Temel Kullanım:​

Bir animasyonu tanımlamak için @keyframes kuralı ve animation özelliği kullanılır. @keyframes kuralı, animasyonun aşamalarını ve her aşamada nasıl görüneceğini tanımlar.


@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

.box {
animation: slidein 1s ease-out;
}

Bu örnekte, .box sınıfına sahip öğe 1 saniye içinde sola doğru kayar.
​

Animasyon Özellikleri:​

animation-name: Animasyon için @keyframes adını belirtir.
animation-duration: Animasyon süresini belirler (örneğin, 1s, 2s).
animation-timing-function: Animasyonun hız eğrisini belirtir (örneğin, ease, linear, ease-in, ease-out, cubic-bezier).
animation-delay: Animasyon başlamadan önceki gecikme süresini belirler (örneğin, 0s, 1s).
animation-iteration-count: Animasyonun kaç kez tekrarlanacağını belirtir (örneğin, infinite, 1, 3).
animation-direction: Animasyonun yönünü belirtir (normal, reverse, alternate, alternate-reverse).
animation-fill-mode: Animasyonun sonlandığında veya başlamadan önceki durumunu belirtir (none, forwards, backwards, both).​

Kompleks Animasyonlar:​

Animasyonlar, birden fazla aşamaya sahip olabilir. @keyframes kuralında yüzde kullanarak belirli anlarda gerçekleşecek değişiklikler tanımlanabilir.


@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}

.ball {
animation: bounce 2s infinite;
}

Bu örnekte, .ball sınıfına sahip öğe sürekli olarak yukarı ve aşağı zıplar.​

​

CSS Geçişler ve Animasyonlar, web sayfalarına dinamik ve görsel açıdan çekici efektler eklemenin güçlü yollarıdır. Geçişler, basit ve etkileşimli değişiklikler için idealdir, animasyonlar ise daha karmaşık ve çok aşamalı hareketler için kullanılır. Bu teknikleri kullanarak, kullanıcı deneyimini zenginleştiren ve dikkat çekici web sayfaları oluşturabilirsiniz.​