Basit CSS Animasyonları
Animasyon, bir öğenin kademeli olarak bir stilden diğerine değişmesine izin verir. İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.
CSS Animasyonları nedir?
CSS animasyonunu kullanmak için önce animasyon için bazı ana kareler belirtmelisiniz.
Anahtar kareler, öğenin belirli zamanlarda hangi stillere sahip olacağını tutar.
CSS Animasyon Parametreleri
@keyframes
animasyon belirli zamanlarda kademeli olarak mevcut stilden yeni stile değişecektir.animation-name
animation-duration
bir animasyonun tamamlanmasının ne kadar süreceğini tanımlar.animation-delay
bir animasyonun başlaması için bir gecikme belirtir. (-) değerle animasyon zaten x saniyedir oynatılıyormuş gibi başlayacaktır.animation-iteration-count
bir animasyonun kaç kez çalıştırılacağını belirtir.animation-direction
bir animasyonun ileri mi, geri mi yoksa alternatif döngülerde mi oynatılacağını belirtir.normal
- Animasyon normal (ileri) olarak oynatılır. Bu varsayılanreverse
- Animasyon ters yönde oynatılır (geriye doğru)alternate
- Animasyon önce ileri, sonra geri oynatılıralternate-reverse
- Animasyon önce geriye, sonra ileriye oynatılır
animation-timing-function
animasyonun hız eğrisini belirtir.ease
- Yavaş başlayan, sonra hızlı ve sonra yavaş biten bir animasyon belirtir (bu varsayılandır)linear
- Baştan sona aynı hızda bir animasyon belirtirease-in
- Yavaş başlayan bir animasyon belirtirease-out
- Yavaş sonlu bir animasyon belirtirease-in-out
- Yavaş başlangıçlı ve bitişli bir animasyon belirtircubic-bezier(n,n,n,n)
- Kübik-bezier işlevinde kendi değerlerinizi tanımlamanıza izin verir
animation-fill-mode
animasyon oynatılmadığında (başlamadan önce, bittikten sonra veya her ikisi) hedef öğe için bir stil belirtir.none
- Varsayılan değer. Animasyon, yürütülmeden önce veya sonra öğeye herhangi bir stil uygulamazforwards
- Öğe, son ana kare tarafından ayarlanan stil değerlerini korur (animasyon yönüne ve animasyon yineleme sayısına bağlıdır)backwards
- Öğe, ilk animasyon karesi tarafından belirlenen stil değerlerini alır (animasyon yönüne bağlıdır) ve bunu animasyon gecikme süresi boyunca korurboth
- Animasyon, animasyon özelliklerini her iki yönde genişleterek hem ileri hem de geri için kuralları takip edecektir.
animation-play-state
Animasyonun çalıştığını veya duraklatıldığını belirtiranimation
yukardaki özelliklerin tek bir satırda kullanılmasını sağlar.
Temel Animation Kullanımı
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div {
animation: example 5s linear 2s infinite alternate;
}
animation: example 5s linear 2s infinite alternate;
}
Örnekler
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#serkan {
color: aqua;
display: inline;
animation-name: Tam;
animation-duration: 3s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {color:aqua;}
20% {color:aquamarine;}
30% {color:red;}
40% {color:orangered;}
50% {color:blue;}
60% {color:salmon;}
70% {color:indigo;}
80% {color:darkslategray;}
90% {color:navy;}
100% {color:royalblue;}
}
#Soyad {
color:chartreuse;
display: inline;
animation-name: Renklilik2;
animation-duration: 3s;
animation-iteration-count: 100;
}
@keyframes Renklilik2 {
0% {color:chartreuse;}
20% {color:royalblue;}
30% {color:orangered;}
40% {color:aqua;}
50% {color:navy;}
60% {color:violet;}
70% {color:indianred;}
80% {color:darkslategray;}
90% {color:navy;}
100% {color:forestgreen;}
}
</style>
</head>
<body>
<h1 id="serkan">SERKAN</h1>
<h1 id="Soyad">DEMİR</h1>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#serkan {
color: aqua;
display: inline;
animation-name: Tam;
animation-duration: 3s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {color:aqua;}
20% {color:aquamarine;}
30% {color:red;}
40% {color:orangered;}
50% {color:blue;}
60% {color:salmon;}
70% {color:indigo;}
80% {color:darkslategray;}
90% {color:navy;}
100% {color:royalblue;}
}
#Soyad {
color:chartreuse;
display: inline;
animation-name: Renklilik2;
animation-duration: 3s;
animation-iteration-count: 100;
}
@keyframes Renklilik2 {
0% {color:chartreuse;}
20% {color:royalblue;}
30% {color:orangered;}
40% {color:aqua;}
50% {color:navy;}
60% {color:violet;}
70% {color:indianred;}
80% {color:darkslategray;}
90% {color:navy;}
100% {color:forestgreen;}
}
</style>
</head>
<body>
<h1 id="serkan">SERKAN</h1>
<h1 id="Soyad">DEMİR</h1>
</body>
</html>
Ekranda Kayan Çiçek
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
opacity: 0;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {opacity: 0; left:0px;}
50% {opacity: 1; left:calc(100vw);}
100% {opacity:0; left:0px;}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
opacity: 0;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {opacity: 0; left:0px;}
50% {opacity: 1; left:calc(100vw);}
100% {opacity:0; left:0px;}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% { top:0px; left:0px; transform: rotate(360deg);}
25% { top:0px; left:800px;}
50% { top:400px; left:800px;}
75% { top:400px; left:0px;}
100% { top:0px; right:0px;}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% { top:0px; left:0px; transform: rotate(360deg);}
25% { top:0px; left:800px;}
50% { top:400px; left:800px;}
75% { top:400px; left:0px;}
100% { top:0px; right:0px;}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
Ekranda Dönen ve Büyüyen Nesne Uygulaması
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
width:283px;
height:240px;
transform: rotate(0deg);
}
50% {
left:calc((100vw - 860px) /2) ;
top:calc((100vh - 780px) /2) ;
width:100%;
height: 100%;
transform: rotate(360deg);
}
100% {
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
width:283px;
height:240px;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>ANİMASYON</title>
<style>
#Cicek {
position: relative;
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
animation-name: Tam;
animation-duration: 4s;
animation-iteration-count: infinite
}
@keyframes Tam {
0% {
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
width:283px;
height:240px;
transform: rotate(0deg);
}
50% {
left:calc((100vw - 860px) /2) ;
top:calc((100vh - 780px) /2) ;
width:100%;
height: 100%;
transform: rotate(360deg);
}
100% {
left:calc((100vw - 283px) /2) ;
top:calc((100vh - 240px) /2) ;
width:283px;
height:240px;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<img id="Cicek" src="cicek1.png" width="283" height="240" />
</body>
</html>
Yorumunuzu Ekleyin