CCS 애니메이션

6_animation.html

  <div class="box"></div>

sytle 태그에 css

    body {
      background: #333;
    }

    .box {
      font-size: 200px;
      width: 200px;
      height: 200px;
      background: transparent;
      position: relative;
      animation-name: animate1;
      /* 이름 */
      animation-duration: 5s;
      /* 시간 */
      animation-iteration-count: infinite;
      /* 횟수 */
      animation-fill-mode: backwards;
      /* 마지막 상태 */
      animation-direction: alternate;
      /* 진행방향 */
    }

    @keyframes animate1 {

      0% {
        transform: translateX(0);
        background-color: red;
      }

      100% {
        transform: translateX(500%) scale(1.5) rotate(360deg);
        background-color: blue;

      }
    }

    @keyframes animate2 {

      /* % 방법 */
      0% {
        left: 0px;
        top: 0px;
        background-color: white;
        border-radius: 0 0 0 0;
      }

      25% {
        left: 300px;
        top: 0px;
        background-color: red;
        border-radius: 50% 0 0 0;
      }

      50% {
        left: 300px;
        top: 300px;
        background-color: green;
        border-radius: 50% 50% 0 0;
      }

      75% {
        left: 0px;
        top: 300px;
        background-color: blue;
        border-radius: 50% 50% 50% 0;
      }

      100% {
        left: 0px;
        top: 0px;
        background-color: white;
        border-radius: 50% 50% 50% 50%;
      }
    }