1. 적용방법
애니메이션 효과를 주는 방법은 크게 transition 속성을 사용하거나, @keyframes을 사용하는 방법이 있다.
2. transition
transition 효과가 트리거 되기 위해서는 특정 속성의 값이 변경되어야 한다.
예를 들어 :hover, onclick 등의 이벤트가 발생했을 때 속성이 변경되도록 하는 것이 대표적이다.
아래 예시는 box에 hover 이벤트가 발생했을 때 background-color를 변경하는 코드이다.
이때 transition 속성을 통해 background-color가 변경될 경우 전환 효과가 1초가 걸리게끔 구현하였다.
주의해야 할 점은 transition이 불가능한 속성이 있다는 점이다.
예를 들어 position 및 display 속성은 transition 효과를 적용할 수 없다.
그외에도 적용할 수 있는 옵션이 있다.
div {
transition: <property> <duration> <timing-function> <delay>;
}- timing-function
- 어떤 타이밍으로 애니메이션이 진행되는지 정할 수 있음.
- mdn 문서 참고
- delay
- 애니메이션이 시작하기 전 얼마만큼의 지연시간을 줄 것인지 정할 수 있음.
3. @keyframes
transition보다 정밀한 애니메이션 효과를 부여하고 싶을 때 사용한다.
우선 css 문서에 @keyframes을 정의해야 한다.
@keyframes 내부에는 정확히 어느 프레임 지점에서 무슨 효과를 부여하고 싶은지를 지정할 수 있다.
단순히 처음과 끝 지점에 대한 스타일을 지정하고 싶다면 from to 를 사용할 수 있으며,
정확한 지점을 나타내고 싶다면 %를 이용할 수 있다.
@keyframes anyname1 {
from: {
transform: translate(0%);
}
to: {
transform: translate(20%);
}
}
@keyframes anyname2 {
0%: {
transform: translate(0%);
}
20% {
transform: translate(10%);
}
100%: {
transform: translate(20%);
}
}이제 애니메이션을 적용하고 싶은 요소에 animation 속성을 선언한 뒤, 앞서 정의한 @keyframes을 적용하면 된다.
div {
animation: anyname 1s;
}그외에도 적용할 수 있는 옵션이 있다.
div {
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
}- timing-function
- 어떤 타이밍으로 애니메이션이 진행되는지 정할 수 있음.
- mdn 문서 참고
- delay
- 애니메이션이 시작하기 전 얼마만큼의 지연시간을 줄 것인지 정할 수 있음.
- iteration-count
- 애니메이션을 얼만큼 반복할 것인지 정할 수 있음.
infinite를 줄 경우 무한 반복.
- fill-mode
- 애니메이션 실행 전/후의 스타일을 지정할 수 있음.
none인 경우 아무 스타일도 지정하지 않음.
기본적으로 애니메이션에서 지정한 스타일은 요소의 기본 스타일에 영향을 미치지 않기 때문에, 애니메이션이 시작하기 직전이나, 애니메이션이 끝났을 때의 스타일은, 요소의 원래 스타일을 따른다.forwards인 경우 애니메이션이 끝나는 지점의 애니메이션 스타일이 유지됨.backwards인 경우 애니메이션의 스타일이 애니메이션이 시작하기 전 부터 유지됨.both인 경우forwards와backwards를 둘 다 적용함.
- play-state
- 애니메이션을 실행시키거나 일시중지시킨다.
running인 경우 실행한다.paused인 경우 일시중지한다.
이때 일시중지 되어도, 스타일은 애니메이션에 적용된 것이 유지된다.