지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
지난 글에서는
Animations을 활용하여
계속해서 이미지가
움직일 수 있는 방법을
알려드렸습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 ( Animations에 대해서 ) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 Transformations에 Transition을 활용하여 이미지가 자연스럽게 움직이는 방법에 대해 알려드렸습니다. 만약 기억이 잘 나지 않으
tm-csc.tistory.com
이번 글에서는 저번보다
더 자연스럽게 애니메이션을
움직여보려고 합니다.
일단 VSC를 실행해주세요.
저번 글이 보셔서 아시겠지만
@keyframes secur {
from {
transform: rotateY(0 deg) scale(0.5);
}
to {
transform: rotateY(360 deg) scale(0.5);
}
}
from과 to 이렇게 두 단계로
움직임을 표현했고
제자리에서 돌게 표현했기에
크게 어색함이 없었는데요.
만약 to에 자리를 이동시켰다면
다시 from으로 돌아갈 때는
갑작스럽게 이동하여
보이기에 어색했을 것입니다.
그럴 땐 이렇게 적음으로써
해결할 수 있는데요.
@keyframes secur {
0% {
transform: rotateY(0 deg)
}
50% {
transform: rotateY(360 deg) translateX(-200px)
}
100% {
transform: rotateY(0 deg);
}
from과 to가 아니라
진행 퍼센트에 따라 움직이는 법을
설정해주고 중간에 위치를
이동시켜도 자연스럽게
원래 위치에 돌아오도록
설정하였는데요.
크롬으로 확인해보면
이렇게 좌우로 이동하면서
360도 회전하지만
전혀 어색하지 않게
제자리로 돌아오는 것을
확인할 수 있습니다.
그럼 몇 단계나 이런 과정을
추가할 수 있는지 궁금하실 텐데요.
0~100까지 스텝을
추가할 수 있는 만큼
원하는 만큼 스텝을 추가하고
이를 움직이게 할 수 있습니다.
당연히 0 25 50 75 100으로
구성할 수 도 있고
0 33 66 100으로 할 수도 있죠.
@keyframes secur {
0% {
transform: rotateY(0 deg)
}
25% {
transform: rotateY(180 deg) scale(0.5);
}
50% {
transform: rotateY(360 deg) translateX(100px)
}
75% {
transform: rotateY(180 deg) scale(1.5);
}
100% {
transform: rotateY(0 deg)
}
이런 식으로 단계를
늘릴 수도 있고 이렇게 되면
이런 식으로 조금 더 화려화지만
자연스럽게 움직이는
애니메이션 움직임을
표현할 수 있습니다.
꼭 한번 직접 해보시는 것을
추천드립니다.
그래야만 자신의 원하는
애니메이션이 어떤 것인지
정확히 인지할 수 있기 때문이죠.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
