CSS iki animasyonu sıra sıra oynatmak

595914 · 27 Nisan 2023

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.

Administraktör · 28 Nisan 2023

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>

8bitlikadadam · 2 Mayıs 2023

595914 dedi:
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.

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.

CSS iki animasyonu sıra sıra oynatmak

Ayrıntılı düzenleme

595914

Centipat

Dosya Ekleri

Administraktör

Megapat

8bitlikadadam

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz