css_애니메이션

keyframes

• 애니메이션을 표현하는 여러 개의 프레임은 @keyframes 모듈을 이용하여 정의

• 백분율을 이용하거나 키워드를 이용하여 프레임을 나눔
  백분율 이용

  @keyframes 애니메이션 명{
  	0% { width: 100px; }
     33% { width: 133px; }
     66% { width: 166px; }
     100% { width: 200px; }
  }

  키워드 이용

  @keyframes 애니메이션 명{
  	from{ width: 100px; }
     to{ width: 200px; }

  요소에 적용

• animation은 단축 속성이다.
  animation이 다른 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있음
  - -name : 적용할 키 프레임 이름
  - -duration : 애니메이션 지속 시간
  - -delay : 애니메이션 시작 전 시간
  - -timing-function : 속도 그래프
  - -direction : 동작 진행 방향
  - -iteration-count : 반복 횟수
  - -fill-mode : 전후 상태 설정
  - -play-state : 애니메이션 적용 여부

  
  

1. 키 프레임 만들기

moving 이라는 이름의 애니메이션 키 프레임 만듦

 @keyframes moving{
          /* left 30px인 곳 부터 */
          from{ left: 30px; }
          /* left 120px인 곳으로 이동*/
          to{ left: 120px; }
 }

2. 애니메이션 적용

적용할 요소 내에 작성

 animation-name: moving;

3. 애니메이션 세부 적용

/* 애니메이션 진행 시간 */
animation-duration: 2s;

/* 애니메이션 시작 전 대기 시간 */
animation-delay: 0s;

/* 애니메이션 재생 속도 */
animation-timing-function: linear;

/* 애니메이션 반복 횟수 */
/* 특정 횟수 (3회) */
animation-iteration-count: 3;
/* 무한하게 애니메이션 반복 */
animation-iteration-count: infinite;

/* 애니메이션의 방향 지정 */
/* 정방향(기본 값)) */
animation-direction: normal;
/* 역방향 */
animation-direction: reverse;
/* 정방향 갔다가 역방향 번갈아가면서 */
animation-direction: alternate;

/* 애니메이션 진행 상태 */
/* running: 기본 값 */
animation-play-state: running;
/* paused : 멈춤 */
animation-play-state: paused;