css를 이용하여 위와 같은 해달 캐릭터를 만들었다. 여기에 자연스럽게 움직이는 효과를 주고 싶다면? transition을 이용하여 효과를 줄 수도 있지만, @keyframes 규칙과 animation 속성을 적용할 수도 있다. 둘은 무슨 차이가 있을까?
transition과 animation
transition과 animation은 모두 요소를 동적으로 움직이게 한다는 점은 공통되지만 차이점이 있다.
| 속성 | 설명 |
|---|---|
| transition | - 2가지의 상태 사이에서의 변화 - 중간상태를 지정할 수 없다. - 주로 hover, focus 등의 상호작용과 함께 사용한다. |
| animation | - 여러 개의 중간상태를 지정할 수 있다. - 반복횟수, 타이밍 등 움직임을 세밀하게 조정할 수 있다. - 주로 주기적이거나 반복적인 움직임을 줄 때 사용한다. |
이번 캐릭터 만들기 프로젝트에서는 해달이 위아래로 움직이면서 조개를 튕기는 효과를 hover 등의 동작없이 페이지에 들어가자마자 반복적으로 나타나도록 할 것이기 때문에 animation을 이용하였다.
@keyframes에 상태 지정하기
@keyframes는 먼저 이름을 지정해야한다. 이름만으로도 어떠한 동작인지 잘 알 수 있도록 작성하는 것이 좋겠다. 설정할 수 있는 지점은 시작과 끝, 그리고 중간 상태도 지정할 수 있다. 시작은 생락이 가능하다. from, to로 작성해도 되고 0%, 100%로 작성해도 된다.
@keyframes bounce{
to{
transform: translateY(-30px);
}
}기존 위치에서 높이값을 -30px 주어 위로 움직이도록 상태를 지정했다.
animation 속성 적용하기
animation에는 다양한 속성들이 있다. 우선 내용을 먼저 정리해보자.
| 속성 | 설명 |
|---|---|
| animation-duration | 애니메이션을 얼마동안 지속할 것인지 시간을 설정한다. 이를 지정하지 않으면 움직이지 않는다. |
| animation-delay | 애니메이션 지연시간. 언제 애니메이션이 시작될 지 지정할 수 있다. |
| animation-direction | 애니메이션이 끝난 후의 위치를 설정할 수 있다. - normal : 원래 있던 위치로 되돌아간다. - alternate : 왔던 방향으로 되돌아가면서 애니메이션을 실행한다. |
| animation-iteration-count | 반복 횟수를 지정한다. - infinite : 무한 반복한다. |
| animation-timing-function | 애니메이션의 시작, 중간, 끝에서의 속도를 지정하여 전체적인 속도 곡선을 지정한다. - linear : 균일한 속도- ease : 중간으로 갈수록 속도가 증가하고 끝에서 다시 감소 - ease-in : 천천히 시작하여 완료될 때까지 증가 - ease-out : 빠르게 시작하여 점점 느려짐 - ease-in-out : 천천히 시작해서 점점 속도가 빨라졌다가 다시 점점 느려진다. - step : 각 지점을 표시(단계별 진행) - cubic-bezier : 직접 커스텀하여 지정 |
애니메이션 속성이 굉장히 많고, 속도를 어떻게 지정하느냐에 따라 느낌이 달라지기 때문에 하나씩 값을 바꾸어 보면서 최적의 값을 찾는 것이 좋은 것 같다.
/*얼굴 움직이기*/
.otter{
animation: bounce 0.6s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
/*조개 움직이기*/
.otter .shell{
animation: bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
}
위의 animation에서 가장 중요한 3가지는 다음과 같다.
- animation-timing-function은 개발자도구에서 직접 그래프를 움직여 원하는 느낌을 찾을 수 있다. 위로 통통 튀기는 느낌을 주기 위해서 처음에는 빠르게 움직이고 끝에서 확 느려지도록 만들었다.
- animation-direction을 따로 설정하지 않은 normal 상태에서는 아래처럼 움직임이 뚝뚝 끊기게 된다. alternate값을 주면 움직인 그대로 되돌아가기 때문에 자연스럽게 움직임이 연결된다.
🔻normal일 때 : 뚝뚝 끊기는 느낌
🔻alternate일 때 : 자연스럽게 연결
- 마지막은 사실 아주 미묘한 차이이다. 바로
.shell에 animation-delay를 0.1s 준 것이다. 얼굴과 조개가 동시에 움직이는 것보다 조개가 0.1s 느리게 시작하고 느리게 떨어지는 것이 아주 디테일한 부분이지만 움직임이 조금 더 리얼하게 느껴진다고 생각했다.
오늘의 교훈
: 애니메이션은 어렵지만 재밌다!! 포트폴리오에도 써먹어야지!😏
