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ılan
    • reverse- Animasyon ters yönde oynatılır (geriye doğru)
    • alternate - Animasyon önce ileri, sonra geri oynatılır
    • alternate-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 belirtir
    • ease-in- Yavaş başlayan bir animasyon belirtir
    • ease-out- Yavaş sonlu bir animasyon belirtir
    • ease-in-out- Yavaş başlangıçlı ve bitişli bir animasyon belirtir
    • cubic-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 uygulamaz
    • forwards- Öğ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 korur
    • both- 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ı belirtir
  • animation 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;
}

    

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

 

Örnekler

Basit CSS Animasyonları 

<!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>

 

Ekranda Kayan Çiçek

Basit CSS Animasyonları

<!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>
 
 
 

 

Basit CSS Animasyonları

 

 
<!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>

 

Ekranda Dönen ve Büyüyen Nesne Uygulaması

 
 
 

Basit CSS Animasyonları

 
<!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>
 
 
 
 

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...