animation 실습

Shin Woohyun·2021년 7월 8일

CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다.
1. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
2. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
3. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

animation-name

: 애니메이션 이름. @keyframe과 연결.

animation-duration

: 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정. default value = 0s

animation-timing-function

linear : 균일한 속도.
ease : default value. 중간으로 갈수록 속도가 증가하다가 끝에서 느려짐.
ease-in : 느리게 시작, 빨라짐.
ease-out : 빠르게 시작, 느려짐.
ease-in-out : 느리게 시작해서 점점 증가하다가 다시 느려짐.

위는 모두 cubic-bezier(p1, p2, p3, p4) 로 찾아보면 된다.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
https://drafts.csswg.org/css-easing-1/#easing-function
https://matthewlein.com/tools/ceaser

animation-delay

: 애니메이션이 시작할 시점을 지정한다. 음수 값을 지정하면 애니메이션 주기 도중에 시작된다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작된다.

animation-iteration-count

: 애니메이션 반복 횟수. default value = 1

infinite : 계속
3 : 3번 반복
1.5 : 1번 반

animation-direction

: 애니메이션이 진행할 방향을 지정한다.

normal : 정방향. default value.
reverse : 역방향. 애니메이션이 종료 상태에서 거꾸로 단계가 진행되므로 타이밍 기능도 거꾸로 돌아간다.
alternate : 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째는 정방향으로 진행된다.
alternate-reverse : 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째는 역방향으로 진행된다.

animation-play-state

: running(default) or paused

animation-fill-mode

: 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다.

none : default value.
forwards : 대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지한다. (크기가 점점 커지는 애니메이션이면 마지막 크기로 계속 커져있다.) 마지막 키 프레임은 animation-direction및 animation-iteration-count의 값에 따라 다르다.
backwards : 애니메이션이 적용되는 첫 번째 관련 keyframe에 정의된 값을 적용, animation-delay 기간 동안 이 값을 유지한다. 첫 번째 관련 키프레임은 animation-direction의 값에 따라 다르다.
both : 둘 다 적용한다.