animation
'animation' 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.
'transition' 속성은 단순히 요소의 프로퍼티 변화에 초점이 맞춰졌다면, animation 속성은 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어 가능하다.
@keyframes
CSS 애니메이션과 트랜지션 방식의 큰 차이점은 @keyframes rule에 있다.
이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.
@keyframes rule은 시간의 흐름에 따라 애니메이션을 정의한다. 여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.
↑ from - to를 지정해서 animation 속성을 줄 수 있음.
%를 설정하여 animation 속성을 줄 수도 있음.
animation-property
animation-property
- animation-name : @keyframes 뒤에 애니메이션을 대표하는 이름 설정.
- animation-duration : 애니메이션이 한 사이클을 완료하는데 걸리는 시간. s,ms 사용. 음수 사용 불가. 이 속성은 반드시 지정해야 한다.
- animation-timing-function : 타미밍 조절 기능. transition 값과 같다. ex) ease, ease-in-out, linear...
- animation-delay : 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
- animation-iteraction-count : 애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 가능.
- animation-direction : 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다. 기본값은 normal.
-- reverse : 거꾸로 재생
-- alternate : 정해진 순서로 진행했다가 반대 순서로 재생
-- alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 재생
- animation-play-state : 애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running. paused는 재생 멈춤.
- animation-fill-mode :애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.
--none : 애니메이션이 끝난 후 상태를 설정하지 x.
--forwards : 애니메이션이 끝난 후 그 지점에 그대로 있음.
--backwards : 애니메이션이 끝난 후 시작점으로 돌아옴.
--both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지함.
雲外蒼天