CSS3 animation 속성

 ㅇ CSS3의 애니메이션 관련 속성

애니메이션 속성
키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다

-webkit-animation-name
애니메이션의 이름.키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다

-webkit-animation-duration
애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0),애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정

-webkit-animation-iteration-count

애니메이션의 동작 회수('infinite'를 지정하면 무한 반복
애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)

-webkit-animation-direction
키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)

-webkit-animation-timing-function
키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition

-webkit-animation-play-state
애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다

-webkit-animation-delay
애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)

 

---

ㅇ animation-timing-function 속성에 지정할 수 있는 값의 의미 6가지

  1. ease : 시작과 종료를 부드럽게
  2. linear : 일정
  3. ease-in : 서서히 시작
  4. ease-out : 서서히 종료
  5. ease-in-out : 서서히 시작하여 서서히 종료
  6. cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정