[CSS] 애니메이션 스타일 (animation)

애니메이션 정의 (시작과 끝 상태 설정)

@keyframe 애니메이션이름 {
    /* 시작 선택자 (0%) */
    from  {
        스타일속성 : 속성값 ;
    }
    /* 끝 선택자 (100%) */
    to {
        스타일속성 : 속성값 ;
    }
}

 

  - 0~100% 내의 %를 선택자로 하여 중간 상태 설정 가능

 

요소에 애니메이션 부여

/* @keyframe에서 정의한 이름과 동일하게 입력 */
선택자 { animation-name : 애니메이션이름 ; }

 

애니메이션 실행 시간 지정

선택자 { animation-duration : 실행시간(단위 s) ; }

 

애니메이션 종료 후 원위치 방법 지정

선택자 { animation-direction : normal | alternate ; }

 

  - normal (기본값)

      : 애니메이션을 끝까지 실행하면 원래 있던 위치로 초기화됨

  - alternate

      : 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가며 애니메이션을 실행함

 

애니메이션 반복 횟수 지정

선택자 { animation-iteration-count : 숫자 | infinite ; }

 

  - infinite : 무한 반복

 

애니메이션 속도 지정

선택자 { animation-timing-function : 속성값 ; }

 

  - linear

      : 시작부터 끝까지 같은 속도로

  - ease (기본값)

      : 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냄 

  - ease-in

      : 시작을 느리게 함

  - ease-out

      : 느리게 끝냄

  - ease-in-out

      : 느리게 시작하고 느리게 끝냄

 

애니메이션 관련 속성 한 번에 표기

선택자 { animation : [이름] duration [속도] [지연시간] [반복횟수] [원위치방법] ; }

 

  - 콤마(,)로 연결하여 여러 애니메이션 적용 가능