CSS ile Animasyon Yapımı

Merhaba arkadaşlar, bu yazımızda CSS3'ün "animation" özelliğini nasıl kullacağımızı öğreneceğiz. Bu özellik ile güzel animasyonlar yapabilirsiniz.

İlk olarak @keyframes ile animasyon kurallarını tanımlıyoruz. Örneğin; renk değişimi yapılsın, büyüsün küçülsün vs.

// DonmeEfekti adında kural tanımlıyoruz
@keyframes DonmeEfekti{
    from {
      transform: rotate(0deg); // 0 dereceden başla
    }
    to {
      transform: rotate(360deg); // 360 derece dön
    }
}

Kuralları tanımladıktan sonra animasyon özelliklerini belirliyoruz. Kullanılabilecek animasyon özellikleri:

• animation-name: Çağıracağımız animasyonun adını belirtiyoruz.
• animation-duration: Animasyonun ne kadar sürede tamamlanacağını belirtiyoruz.
• animation-timing-function: Animasyonun geçiş hızını belirliyoruz. (linear, ease-in, ease-out, ease-in-out, cubic-bezier)
• animation-delay: Animasyonun ne kadar süre sonra başlayacağını belirtiyoruz. (9s, 6500ms)
• animation-iteration-count: Animasyonun kaç kere tekrar edeceğini belirliyoruz.
• animation-direction: Animasyon yönünü ayarlamamızı sağlar. (normal, reverse, alternate, alternate-reverse)
• animation-play-state: Animasyonun başlamasını ve durmasını belirliyoruz. (running, paused)

<style>
.donen{
    width: 100px;
    height: 120px;
    text-align: center;
    margin: 100px auto 0;
    background-image: url(http://pluspng.com/img-png/yildiz-png-img-280.png);
    background-size: 100px 100px;
    background-position: center bottom;
    background-repeat: no-repeat;
    animation-name: DonmeEfekti;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
</style>
<div class="donen">Dön</div>

Kodumuzun demosunu bu linkten kontrol edebilirsiniz.

Hepinize keyifli kodlamalar :)