Animation 동작 효과 주기

예시>

HTML

  <div class="ani1"></div>
  <div class="ani2"></div>

CSS

.ani1{width:100px; height: 100px; margin: 50px auto 0 auto; background: #39e2f2;}
        .ani1:hover{animation: ani 1s ease-in-out .5s 2 alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }
.ani2{width:100px; height: 100px; margin: 100px auto 0 auto; background: #cf243f;}
        .ani2:hover{animation: ani 1s linear infinite alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }

속성값 참고>