CSS Animasyonları


İçindekiler

    İçindekiler tablosunu göster


CSS Animasyonları

CSS, HTML öğelerinin JavaScript veya Flash kullanmadan canlandırılmasına olanak tanır!

CSS

Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Animasyonlar için Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

CSS Animasyonları nedir?

Animasyon, bir öğenin kademeli olarak bir stilden diğerine değişmesine olanak tanır.

İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.

CSS animasyonunu kullanmak için öncelikle bazı anahtar kareleri belirtmeniz gerekir. animasyon.

Anahtar kareler, öğenin belirli zamanlarda hangi stillere sahip olacağını tutar.


@keyframes Kuralı

@keyframes içinde CSS stillerini belirttiğinizde kural, animasyonun mevcut stilden yeni stile kademeli olarak değişmesidir Belirli zamanlarda.

Bir animasyonun çalışması için animasyonu bir öğeye bağlamanız gerekir.

Aşağıdaki örnek, "örnek" animasyonu <div> öğesine bağlar. Animasyon 4 saniye sürecek ve kademeli olarak değişecektir. <div> öğesinin arka plan rengi "kırmızı"dan "sarı"ya:

Örnek

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>


Not: animation-duration özelliği Bir animasyonun tamamlanmasının ne kadar süreceğini tanımlar. animation-duration özelliği belirtilmemişse, herhangi bir animasyon meydana gelmeyecek çünkü varsayılan değer 0s'dir (0 saniye).

Yukarıdaki örnekte stilin ne zaman değişeceğini kullanarak belirttik. "başlangıç" ve "bitiş" anahtar kelimeleri (bu %0 (başlangıç) ve %100'ü (tamamlandı) temsil eder).

Yüzde kullanmak da mümkündür. Yüzdeyi kullanarak istediğiniz kadar ekleyebilirsiniz stil istediğiniz gibi değişir.

Aşağıdaki örnek <div> öğesinin arka plan rengini değiştirecektir. animasyon %25 tamamlandığında, %50 tamamlandığında ve yine animasyon %100 tamamlandığında öğe:

Örnek

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>


Aşağıdaki örnek, <div> öğesinin hem arka plan rengini hem de konumunu değiştirecektir. animasyon %25 tamamlandığında, %50 tamamlandığında ve yine animasyon %100 tamamlandığında öğe:

Örnek

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>




Animasyonu Geciktirme

animation-delay özelliği, bir animasyonun başlatılması için bir gecikme belirtir.

Aşağıdaki örnekte, animasyonu başlatmadan önce 2 saniyelik bir gecikme vardır:

Örnek

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>


Negatif değerlere de izin verilir. Negatif değerler kullanılıyorsa animasyon zaten N saniyedir oynatılıyormuş gibi başlayacak.

Aşağıdaki örnekte animasyon sanki daha önce yapılmış gibi başlayacaktır. 2 saniye boyunca oynatılıyor:

Örnek

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>



Bir Animasyonun Kaç Kez Çalıştırılması Gerektiğini Ayarlayın

animation-iteration-count özelliği, bir animasyonun kaç kez çalıştırılması gerektiğini belirtir.

Aşağıdaki örnek, animasyonu durmadan önce 3 kez çalıştıracaktır:

Örnek

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>


Aşağıdaki örnek, animasyonu oluşturmak için "sonsuz" değerini kullanır sonsuza kadar devam et:

Örnek

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>



Animasyonu Ters Yönde veya Alternatif Döngülerde Çalıştırın

animation-direction özelliği şunu belirtir: Bir animasyonun ileri, geri veya dönüşümlü olarak oynatılması gerekip gerekmediği döngüler.

Animation-direction özelliği aşağıdaki değerlere sahip olabilir:

normal

- Animasyon normal şekilde oynatılır (ileriye doğru). Bu varsayılandır

reverse

- Animasyon ters yönde (geriye doğru) oynatılır

alternate

- Animasyon önce ileriye, sonra geriye doğru oynatılır

alternate-reverse

- Animasyon önce geriye, sonra ileriye doğru oynatılır

Aşağıdaki örnek, animasyonu ters yönde (geriye doğru) çalıştıracaktır:

Örnek

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>


Aşağıdaki örnek, animasyonu yapmak için "alternatif" değerini kullanır önce ileri, sonra geriye doğru koşun:

Örnek

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>


Aşağıdaki örnek, animasyonu yapmak için "alternatif-geri" değerini kullanır önce geriye, sonra ileriye doğru koşun:

Örnek

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>



Animasyonun Hız Eğrisini Belirleyin

animation-timing-function özelliği, hız eğrisini belirtir. animasyon.

Animation-timing-function özelliği aşağıdaki değerlere sahip olabilir:

ease

- Yavaş başlayan, sonra hızlı, sonra yavaş yavaş biten bir animasyon belirtir (bu varsayılandır)

linear

- Baştan sona aynı hızda bir animasyon belirtir

ease-in

- Yavaş başlayan bir animasyonu belirtir

ease-out

- Yavaş uçlu bir animasyonu belirtir

ease-in-out

- Yavaş başlayan ve biten bir animasyonu belirtir

cubic-bezier(n,n,n,n)

- Kübik bezier işlevinde kendi değerlerinizi tanımlamanıza olanak tanır

Aşağıdaki örnek kullanılabilecek farklı hız eğrilerinden bazılarını göstermektedir:

Örnek

#div1 {animation-timing-function: linear;}
#div2 
{animation-timing-function: ease;}
#div3 {animation-timing-function: 
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 
{animation-timing-function: ease-in-out;}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>



Bir Animasyon İçin Doldurma Modunun Belirlenmesi

CSS animasyonları, ilk animasyon karesi oynatılmadan önce bir öğeyi etkilemez veya son ana kare oynatıldıktan sonra. Animation-fill-mode özelliği şunları yapabilir: bu davranışı geçersiz kılın.

animation-fill-mode özelliği, bir Animasyon oynatılmadığında hedef öğenin stili (ondan önce) başlar, bittikten sonra veya her ikisi birden).

Animation-fill-mode özelliği aşağıdaki değerlere sahip olabilir:

none

- Varsayılan değer. Animasyon, yürütülmeden önce veya yürütüldükten sonra öğeye herhangi bir stil uygulamayacaktır

forwards

- Öğe, son ana kare tarafından belirlenen stil değerlerini koruyacaktır (animasyon yönüne ve animasyon yineleme sayısına bağlıdır)

backwards

- Öğe, ilk anahtar kare tarafından belirlenen stil değerlerini alır (animasyon yönüne bağlıdır) ve bunu animasyon gecikme süresi boyunca korur

both

- Animasyon, animasyon özelliklerini her iki yönde de genişleterek hem ileri hem de geri kurallara uyacaktır

Aşağıdaki örnek, <div> öğesinin stil değerlerini korumasını sağlar. animasyon bittiğinde son ana kare:

Örnek

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>


Aşağıdaki örnek, <div> öğesinin, tarafından ayarlanan stil değerlerini almasını sağlar. animasyon başlamadan önceki ilk ana kare (animasyon gecikme süresi sırasında):

Örnek

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>


Aşağıdaki örnek, <div> öğesinin ayarlanan stil değerlerini almasını sağlar animasyon başlamadan önceki ilk anahtar kareye kadar ve stil değerlerini koruyun animasyonun sona erdiği son ana kareden itibaren:

Örnek

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>



Animasyon Steno Özelliği

Aşağıdaki örnekte animasyon özelliklerinden altı tanesi kullanılmaktadır:

Örnek

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
} 

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>


Yukarıdaki animasyon efektinin aynısı kısayol kullanılarak da elde edilebilir. animasyon özelliği:

Örnek

div
{
    animation: example 5s linear 2s infinite alternate;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>




CSS Animasyon Özellikleri

Aşağıdaki tabloda @keyframes kuralı ve tüm CSS animasyon özellikleri listelenmektedir:

@keyframes

Animasyon kodunu belirtir

animation

Tüm animasyon özelliklerini ayarlamak için kullanılan kısa bir özellik

animation-delay

Bir animasyonun başlangıcı için bir gecikme belirtir

animation-direction

Bir animasyonun ileri, geri veya geriye doğru oynatılıp oynatılmayacağını belirtir. alternatif döngülerde

animation-duration

Bir animasyonun bir döngüyü tamamlamasının ne kadar zaman alması gerektiğini belirtir

animation-fill-mode

Animasyon oynatılmadığında öğe için bir stil belirtir (Başlamadan önce, bittikten sonra veya her ikisi)

animation-iteration-count

Bir animasyonun kaç kez oynatılması gerektiğini belirtir

animation-name

@keyframes animasyonunun adını belirtir

animation-play-state

Animasyonun çalışıp çalışmadığını veya duraklatıldığını belirtir

animation-timing-function

Animasyonun hız eğrisini belirtir