CSS 애니메이션(Animation)
CSS3 animation 속성을 사용하여 element에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.
애니메이션은 CSS 스타일과 애니메이션의 중간 상태를 나타내는 @keyframes으로 이루어진다. 이 키 프레임에는 요소에 적용될 CSS 스타일이 포함되어 있다.
@keyframes
CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.
@keyframes를 사용하기 위해서 세 가지가 필요하다.
- animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름
- 스테이지 : from-to 로 0~100% 의 구간
- CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일
@keyframes 애니메이션 이름 { /* animation-name */
from {
css 속성: 속성 값;
}
원하는 num 값% { /* 애니메이션 진행도에 따른 스타일을 설정 */
css 속성: 속성 값;
}
60% {
transform: rotate(200deg);
}
to {
css 속성: 속성 값;
}
}위의 키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 @keyframes 이름을 불러오면 사용할 수 있다. 이런 키프레임을 사용하기 위해서는 애니메이션 이름 외에도 다양한 속성을 작성해주어야 한다.
아래는 애니메이션 속성의 종류이다.
animation-name: @keyframes 이름animation-duration: 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정, 애니메이션을 시작하기 전 지연시간 설정animation-direction: 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)animation-iteration-count: 반복 횟수 지정 ( infinite 로 지정하여 무한히 반복할 수 있다.)animation-play-state: 애니메이션 재생 상태, 애니메이션을 멈추거나 다시 시작할 수 있다.animation-timing-function: 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )animation-fill-mode: 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )
Example
class명이 element인 HTML 태그는 1초의 지연시간 후 4초 동안 사라졌다가 나타나기를 반복하는, 즉 무한으로 깜빡이는 효과를 만들 것이다.
.element {
animation-name: fadeOut;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}위의 코드를 짧게 이렇게 작성할 수도 있다.
.element {
animation: fadeOut 4s 1s infinite linear alternate;
}Vendor Prefixes
크로스 브라우징 이슈를 해결하기 위해 브라우저에 맞는 prefix(접두사)를 붙여준다.
- 크롬&사파리 : -webkit-
- 파이어폭스 : -moz-
- 오페라 : -o-
- 인터넷 익스플로러 : -ms-
.element {
-webkit-animation: fadeOut 4s 1s infinite linear alternate;
-moz-animation: fadeOut 4s 1s infinite linear alternate;
-ms-animation: fadeOut 4s 1s infinite linear alternate;
-o-animation: fadeOut 4s 1s infinite linear alternate;
animation: fadeOut 4s 1s infinite linear alternate;
}@keyframes 앞에도 Vendor Prefixes를 적용하면 된다.
Reference
👩🚀 No worries! Just record