CSS iki animasyonu sıra sıra oynatmak

595914

Centipat
Katılım
4 Kasım 2022
Mesajlar
80
Sitedeki bir resmi ilk yukarıdan aşağı, sonra soldan sağa oynatacağım. İki animasyonu da yaptım, sadece sıra sıra çalışmaları gerekiyor. Animasyon kodları şu şekilde. ChatGPT yardımcı olamadı maalesef.
 

Dosya Ekleri

  • kodlar.JPG
    50,2 KB · Görüntüleme: 82
Son düzenleyen: Moderatör:
Daha iyisini javascript ile yapabilirsin.
HTML:
<div class="box"></div>
<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: red;
      position: relative;
    }

    .box:hover {
      background-color: blue;
      animation: animation 2s infinite;
    }

    @keyframes animation {
      0% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-20px);
      }
      50% {
        transform: translateY(20px);
      }
      75% {
        transform: translateX(-20px);
      }
      100% {
        transform: translateX(+20px);
      }
    }

</style>
 
Animation delay'i kullan. CSS kodları aslında aynı anda çalışır. Tarayıcıyı kullanan bilgisayarın ve internetin gücüne bağlı olarak yüklenme sırası değişebilir.

Eğer iki hareket arasında bir gecikme olmayacaksa önce fonksiyonları birleştirip sonra animation forward kullanabilirsin.

Ayrı ayrı kullanılacaksa sadece delay iş görür. Örnek veremiyorum zira telefondan yazmak uzun sürüyor çok üşeniyorum.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…