CSS Tekrarlayan Animasyon Nasıl Yapılır?

CSS ile Tekrarlayan Animasyon Nasıl Yapılır?

Merhaba arkadaşlar, bu yazıda sizlere CSS ile tekrarlayan bir animasyonu nasıl yapacağınızı anlatacağım. Örnek bir senaryo olarak web sayfamızda bir adet aşağı yönü gösterir ikonumuz olsun ve bu ikon sürekli olarak yukarı aşağı şekilde hareket ederek kullanıcının dikkatini kendisine çeksin. Bu şekilde bir ikon animasyonu yapmak için CSS kodlarımızı yazmaya başlayabiliriz.

Aşağıda yer alan kod yapısında öncelikle down-botton adında sınıfa sahip olan nesnemizin stil özelliklerini tanımladık. Nesnenin yuvarlak ve koyu renkli olmasını, ekranın ortasında yer almasını ve imleçin üzerine geldiğinde pointer yani seçici olmasını sağladık. Daha sonrasında ise nesnemizin hareket halinde olması için gerekli olan animasyon kodlarını yazdık.

.down-button {
    color: white;
    font-size: 2.4em;
    padding: 24px;
    background-color: #383838;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    left: 50%;
    cursor: pointer;
    animation-name: down-button;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-duration: 1s;
}
@keyframes down-button {
    from {bottom: 15px;}
    to {bottom: 30px;}
}