Haydi iki satır kod yazalım
Css İle Animasyon Kullanımı
2024-12-08 00:07:21 Admin adet yorum yapıldı;
CSS ile animasyon yapmak için @keyframes kuralı kullanılır. Bu kural, bir öğenin belirli bir süre boyunca nasıl değişeceğini tanımlamak için kullanılır. Animasyonlar, öğeler üzerinde hareket, renk değişimi, opaklık gibi birçok görsel etkiyi sağlar. İşte CSS animasyonu oluşturmanın temel adımları:
1. @keyframes ile Animasyon Tanımlama
@keyframes kuralı, animasyonun adımlarını ve bu adımlarda gerçekleşecek değişiklikleri tanımlar.
Örnek: Basit Hareket Animasyonu
@keyframes moveUp {
0% {
transform: translateY(100px); /* Aşağıda başla */
opacity: 0; /* Görünmez */
}
50% {
transform: translateY(50px); /* Ortaya yaklaş */
opacity: 0.5; /* Yarı saydam */
}
100% {
transform: translateY(0); /* Yukarı hareket */
opacity: 1; /* Tam görünür */
}
}
2. Animasyonu Öğeye Uygulama
Animasyonu, bir öğeye uygulamak için animation özelliği kullanılır.
Örnek:
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: moveUp 2s ease-in-out; /* 2 saniye, yumuşak geçiş */
}
3. Animasyon Özellikleri
animation özelliği birden çok değer alabilir:
animation-name: @keyframes ile tanımlanan animasyonun adı.
animation-duration: Animasyonun ne kadar süreceği (ör. 2s, 500ms).
animation-timing-function: Hız eğrisi (ease, linear, ease-in, ease-out, ease-in-out).
animation-delay: Animasyonun başlamadan önce bekleyeceği süre.
animation-iteration-count: Kaç kez tekrar edeceği (infinite sonsuz döngü için kullanılır).
animation-direction: Animasyonun hangi yönde oynayacağı (normal, reverse, alternate).
Örnek:
.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveUp 3s ease-in 1s infinite alternate;
}
moveUp: Animasyon adı.
3s: Süresi.
ease-in: Yavaş başlayıp hızlanır.
1s: 1 saniye gecikmeli başlar.
infinite: Sonsuz tekrar eder.
alternate: Bir ileri bir geri oynar.
4. Tam Çalışan Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animasyon</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: moveUp 2s ease-in-out infinite alternate;
}
@keyframes moveUp {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Popüler Kullanımlar
Renk Değiştirme:
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
Döndürme:
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Büyüme/Küçülme:
@keyframes scaleUp {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
1. @keyframes ile Animasyon Tanımlama
@keyframes kuralı, animasyonun adımlarını ve bu adımlarda gerçekleşecek değişiklikleri tanımlar.
Örnek: Basit Hareket Animasyonu
@keyframes moveUp {
0% {
transform: translateY(100px); /* Aşağıda başla */
opacity: 0; /* Görünmez */
}
50% {
transform: translateY(50px); /* Ortaya yaklaş */
opacity: 0.5; /* Yarı saydam */
}
100% {
transform: translateY(0); /* Yukarı hareket */
opacity: 1; /* Tam görünür */
}
}
2. Animasyonu Öğeye Uygulama
Animasyonu, bir öğeye uygulamak için animation özelliği kullanılır.
Örnek:
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: moveUp 2s ease-in-out; /* 2 saniye, yumuşak geçiş */
}
3. Animasyon Özellikleri
animation özelliği birden çok değer alabilir:
animation-name: @keyframes ile tanımlanan animasyonun adı.
animation-duration: Animasyonun ne kadar süreceği (ör. 2s, 500ms).
animation-timing-function: Hız eğrisi (ease, linear, ease-in, ease-out, ease-in-out).
animation-delay: Animasyonun başlamadan önce bekleyeceği süre.
animation-iteration-count: Kaç kez tekrar edeceği (infinite sonsuz döngü için kullanılır).
animation-direction: Animasyonun hangi yönde oynayacağı (normal, reverse, alternate).
Örnek:
.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveUp 3s ease-in 1s infinite alternate;
}
moveUp: Animasyon adı.
3s: Süresi.
ease-in: Yavaş başlayıp hızlanır.
1s: 1 saniye gecikmeli başlar.
infinite: Sonsuz tekrar eder.
alternate: Bir ileri bir geri oynar.
4. Tam Çalışan Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animasyon</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: moveUp 2s ease-in-out infinite alternate;
}
@keyframes moveUp {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Popüler Kullanımlar
Renk Değiştirme:
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
Döndürme:
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Büyüme/Küçülme:
@keyframes scaleUp {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
Yorum yapmak için giriş yapın.
yorum idsi: 24Son Yapılan Yorumlar
Hakkımda
Mehmet Karadavut
1983 yılında Ankara'da doğdum ve o günden beri hayalperest ve teknoloji tutkunu biriyim. 4 yıldır yazılım geliştirme alanında çalışıyorum ve bu süre zarfında birçok projede yer aldım.