1. animation
css에 transition처럼, 요소에 적용되는 css 스타일을 다른 css 스타일로
전환시킬 때 부드러운 동작으로 전환 시켜 애니메이션 효과를 줄 수 있다.
css transition는 변경되어야 하는 스타일만 지정하지만,
animation은 중간에 변경되는 스타일을 세밀하게 지정할 수 있다는 차이점이 있으며,
css animation이 javascript 기반의 애니메이션보다 렌더링 성능이 더 좋다.
따라서 애니메이션 효과를 적용할 때 상황에 따라
가벼운 애니메이션 효과는 css animation을
세밀한 제어가 필요한 애니메이션은 javascript를 사용하는 편이 좋다.
2. animation property
1) animation-name:
- 애니메이션의 중간 상태를 지정하기 위한 이름을 지정한다.
- 중간 상태는 @keyframes 규칙을 이용하여 작성한다.
- @keyframes 속성과 animation-name 이름은 동일하게 지정한다.
- 이름을 정하는 규칙
! 영문 소문자, 숫자, 문자열, 언더바, 하이픈을 사용
! 여러개의 name을 나열할 경우 ','를 사용한다.
2) animation-duration:
- 한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
- 기본값은 0s이다.
3) animation-timing-function:
- 중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정한다.
- 기본값은 ease이다.
linear, ease-in, ease-out, ease-in-out 사용 가능
step-start: 시작하자 마자 바로 종료
step-end: 일정 시간 이후 바로 종료
steps(n, start | end): n단계로 나누어 변화한다.
cubic-bezier(n, n, n, n): bezier curves 부드러운 곡선이란 뜻이며,
n은 0~1의 값을 넣는다.
4) animation-delay:
- 엘리먼트가 로드되고 난 뒤, 언제 애니메이션이 시작될지 지정한다.
- 기본값은 0s이다.
- 한 줄에 적을 경우 반드시 지속시간(duration) 뒤에 와야 한다.
5) animation-ireration-count:
- 애니메이션이 몇 번 반복될지 양수로 지정한다.
- infinite로 지정하여 무한 반복이 가능하다.
- 기본값은 1이다.
6) animation-direction:
- 애니메이션 종료 뒤, 다시 처음부터 시작하거나 역방향으로 진행될지 지정한다.
- 기본값은 normal이다.
reverse: 역방향
alternate: 정방향과 역방향으로 한 번씩 번갈아 재생한다.(정방향 시작)
alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생한다.
(역방향 시작)
7) animation-fill-mode:
- 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
- 기본값은 none
forwords: 애니메이션 중이 아닌 경우, 애니메이션의 마지막 키프레임의
css 스타일을 유지한다.
backwords: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션의 키프레임의
css 스타일을 유지한다.(지연 시간을 포함한다.)
both: 애니메이션 시작 전에는 첫 번째 애니메이션의 키프레임을 유지,
종료 후에는 마지막 애니메이션의 css 스타일을 유지한다.
8) animation-play-state:
- 애니메이션을 멈추거나 다시 시작할 수 있다.
- 기본값은 running이다.
3. keyframes 문법
from 또는 0%에 설정한 스타일에서 출발하여 to 또는 100%까지,
그 중간 시점을 %로 표기하여 각 시점에 대해 설정한 스타일로
변경되는 애니메이션 스타일을 설정할 수 있다.
- from(0%): 시작 프레임
- to(100%): 마지막 프레임
- 0% ~ 100%: 원하는 시점의 프레임
1) from - to
ex) @keyframes animation-name {
from {
style;
}
to {
style;
}
}
2) 0% - 100%
ex) @keyframes animation-name {
0% {
style;
}
100% {
style;
}
}
Hello World!