애니메이션

.ani-wrap{position: relative;}

.box{width: 100px; height: 100px; background-color: #ffae19; position: absolute;

  animation-name: animation1;

  animation-duration: 3s;

  animation-delay: 1s;

  animation-iteration-count: 3;

  animation-direction: alternate;

  animation-fill-mode: forwards;

}

@keyframes animation1 {

  from {left: 0;}

  to {left: 300px; background-color: pink;}

}

0% 50% 100% 이런 식으로도 가능하다.

 

name: 애니메이션 이름

iteration-count : 반복횟수

animation-direction: 역방향, 정방향갔다 역방향 등.

fill-mode : 이거 forwards로 하면 애니메이션 하고 도착한 그곳에 멈춤

 

transform 활용해서 하면 멋짐

 

.run {
  animation-fill-mode: forwards;
  animation-name: runRight, runLeft;
  animation-delay: 0s, 3s;
  animation-duration: 3s, 12s;
  animation-timing-function: ease-in, ease-in-out;
}

 

이렇게 여러 개 할 수도 있는 듯.

duratino이랑 delay 조절해서 하면 되는 듯.