특정 엘리먼트가 꼭 hover, focus, active 와 같은
CSS 선택자가 함께 사용되지 않더라도 렌더링될 때 효과를 가질 순 없을까?
그걸 가능하게 해주는 것이 바로 CSS의 animation 기능이다.
애니메이션(animation) 이란?
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 기능으로, 다음의 하위 속성을 갖는다.
#MDN 애니메이션 공식 문서
-
animation-name(en-US)
: 이 애니메이션의 중간 상태를 지정한다.
중간 상태는@keyframes규칙을 이용하여 기술한다. -
animation-delay
: 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지를 지정한다. -
animation-direction
: 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다. -
animation-duration
: 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다. -
animation-iteration-count(en-US)
: 애니메이션이 몇 번 반복될지 지정한다.
infinite로 지정하여 무한히 반복하는 것도 가능하다. -
animation-play-state(en-US)
: 애니메이션을 멈추거나 다시 시작할 수 있다. -
animation-timing-function(en-US)
: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다. -
animation-fill-mode
: 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
애니메이션(animation) 사용하기
example.js
function Example() {
return (
<>
<div className='example_container'>Container</div>
</>
)
}example.css
.example_container {
display: flex;
width: 10px;
height: 10px;
animation-name: fade-in;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}example.js에는 클래스명이 'example_container'인 <div> 엘리먼트가 있다.
example.css에는 'example_container' 클래스에 대한 속성이 명시되어 있다.
그리고 그 아래의 @keyframes를 통해 애니메이션의 이름과 효과를 설정할 수 있다.
@keyframes 애니메이션 이름 {
from {
애니메이션이 시작될 때의 속성
}
to {
애니메이션이 끝날 때의 속성
}
}이렇게 말이다!
example.css를 풀어보자면,
'example_container' 클래스에 대해 @keyframes로 명시된 'fade-in' 애니메이션을 적용하고, 애니메이션은 animation-duration으로 설정된 0.75초 동안 진행되도록 한다. 그리고 animation-fill-mode속성을 forwards로 설정하여 애니메이션이 끝나면 끝난 그대로 상태를 유지하도록 하겠다는 것을 의미한다.
즉, example.css에 의해 'example_container'는 처음에는 투명도가 0이었다가 0.75초 동안 투명도가 1로 바뀌는 애니메이션이 등장하고, 투명도가 1인 상태로 끝나 그 상태를 유지하게 된다.
CSS 선택자를 사용하지 않고서도 자체적으로 CSS를 적용가능하게 해주는
애니메이션(animation)에 대해 알아보았다 :)
