transform box animation

test for 'factory' element

by trentHarlem

HTML

<div class='move'>

</div>

CSS

.move {
    background: dodgerblue;
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(0, 212, 255, 1) 0%, rgba(36, 9, 121, 1) 150%);

    /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 0%, rgba(36,9,121,1) 100%); */
    width: 200px;
    height: 200px;
    border-radius: 10px;
    animation: move 5s linear infinite;
    animation-delay: 500ms;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
      border-bottom-right-radius: 50%;
    }

    /*         15% {
              transform: translateX(0px);
              border-top-right-radius: 30%;
            } */

    25% {
      transform: translateX(400px) rotate(360deg);
      border-bottom-left-radius: 50%;
    }

    /* 40% {
      transform: translateX(400px) rotate(360deg);
      border-bottom-left-radius: 30%;
    } */

    50% {
      transform: translateY(200px) translateX(400px);
      border-top-left-radius: 50%;
    }

    /* 65% {
      transform: translateX(0px) translateY(200px);
      border-bottom-right-radius: 30%;
    } */

    75% {
      transform: translateX(0px) translateY(200px)rotate(-200deg);
      border-top-right-radius: 50%;
    }

    /*  90% {
      transform: translateY(0px);
      border-top-left-radius: 30%;
    } */

    100% {
      transform: translateY(0px);
      border-bottom-right-radius: 50%;
    }
  }