css 애니메이션

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

animation-iteration-count (en-US)

애니메이션이 몇 번 반복될지 지정. infinite로 지정하여 무한히 반복한다.

animation-name (en-US)

이 애니메이션의 중간 상태를 지정. 

animation-play-state (en-US)

애니메이션을 멈추거나 다시 시작

animation-timing-function (en-US)

중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

 

텍스트가 브라우저를 가로질러 움직이게 하기

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

애니메이션 반복하기

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

앞뒤로 움직이기

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
} 

//alternate