v2.5.2
Giriş yap

CSS Animation

gorkem59
340 defa görüntülendi
1

Animation kullanarak kutumun sırasıyla 1,2,3 ve 4. basamağa gelmesini nasıl sağlayabilirim?
Görsel için: https://prnt.sc/247j0en

@keyframes haraket {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: 0;
        right: 0;
    }
    75%{
        right: 0;
        bottom: 0;
    }
    100% {
        bottom: 0;
        left: 0;
    }
}

Bu kodları denedim ancak istediğim gibi çalışmadı. Bilgisi olan yardımcı olabilir mi?

css
Cevap yaz
Cevaplar (1)
bilalyaver
854 gün önce
@keyframes box 
{
        0%{
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
         25% {
          top: 0;
          left: 0;
          transform: translate(0, 0);
        }
        50% {
          top:0;
          left: 100%;
          transform: translate(-100%, 0);
        }
        75% {
          top: 100%;
          left: 100%;
          transform: translate(-100%, -100%);
        }
        100% {
          top: 100%;
          left: 0;
          transform: translate(0, -100%);
        }
      }
      ```
      
      Böyle yapabilirsin.
0
#008514