on
CSS(16)
CSS(16)
☞ 애니메이션 알아보기
- CSS3의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있음
1. CSS 애니메이션에서 사용하는 속성
- animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 함
- 키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정함
- animation 관련 속성
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
1-1. 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
- 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframe 속성을 이용해 바뀌는 지점을 설정함
- 형식
@keyframe <이름> { <선택자> { <스타일> } }
- 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 함. 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분함
- 형식
animation-name: <키프레임 이름> | none
- @keyframes 속성에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킴
예를 들어, 애니메이션의 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가하면 됨.
시작과 끝 위치만 사용하려면 0%, 100%와 같은 값 대신에, from과 to라는 키워드를 사용해도 됨
1-2. 애니메이션의 실행 시간을 지정하는 animation-duration 속성
- animation-duration 속성은 애니메이션을 얼마 동안 재생할 것인지 설정함
- 형식
animation-duration: <시간>
- 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위
- 기본값은 0이므로, animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않음
1-3. 애니메이션의 방향을 지정하는 animation-direction 속성
- 애니메이션은 기본적으로 keyframes에서 정의한 from에서 to 순서로 진행하는데, animation-direction 속성을 사용하면 진행 방향을 바꿀 수 있음
- 형식
animation-direction: normal | reverse | alternate | alternate-reverse
- animation-direction의 속성값
(1) normal : 애니메이션을 from에서 to순으로 진행함 (기본값)
(2) reverse : 애니메이션을 to에서부터 from 순으로 즉, 역방향으로 진행
(3) alternate : 홀수 번째는 normal로, 짝수 번째는 reverse로 진행
(4) alternate-reverse : 홀수 번째는 reverse로, 짝수 번째는 normal로 진행
1-4. 반복 횟수를 지정하는 animation-iteration-count 속성
- 상황에 따라 애니메이션을 반복해서 보여 줘야 할 때 사용
- animation-iteration-count 속성을 사용해서 반복 횟수를 정함
- 형식
animation-iteration-count: <숫자> | infinite
- animation-iteration-count의 속성값
(1) 숫자 : 애니메이션의 반복 횟수를 정함
(2) infinite : 애니메이션을 무한 반복함
1-5. 애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성
- 트랜지션과 마찬가지로, 애니메이션에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있음
- 형식
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
- animation-timing-function 속성에서 사용할 수 있는 값은 트랜지션에서 배운 transition-timing-function 속성값과 같음
1-6. 애니메이션의 속성을 한꺼번에 표기하는 animation 속성
- animation 속성을 한 줄씩 따로따로 작성하지 않고 한꺼번에 표기할 때 사용
- 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 함. 실행 시간을 지정하지 않으면 기본값으로 0이 적용되어 애니메이션 효과를 볼 수 없음
- 형식
animation: | | | | |
- 예시
.box { animation-name: moving animation-duration: 3s; animation-timing-function: ease-in; animation-direction: alternate; animation-iteration-count: infinite; }
→ animation 속성을 사용하면 다음과 같이 한 줄의 코드로 간단하게 줄일 수 있음
.box { animation: moving 3s alternate infinite ease-in; }
from http://funair1004.tistory.com/22 by ccl(A) rewrite - 2021-09-12 15:27:05