지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
지난 글에서는
Transformations에
Transition을 활용하여
이미지가 자연스럽게
움직이는 방법에 대해
알려드렸습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 ( Transformations에 대해서 ) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Transformations 을 활용하여 이미지의 크기 및 축을 중심으로 회전시키는 방법에 대해 알려드렸습니다. 만약 기억이 잘 나지 않
tm-csc.tistory.com
이번 글에서는
Animations에 대해
조금 더 알아보겠습니다.
저번 글에서 보여드렸듯이
Transformations과
Transiton을 활용하여
이미지를 자연스럽게
움직이게 만들었는데요.
마우스의 커서를 올려놓지 않으면
해당 동작은 일어나지 않았죠.
그렇다면 계속해서 재생되는
애니메이션을 표현하고 싶다면
어떻게 해야 할까요?
그럼 일단 VSC부터
실행시켜주세요.
우선적으로
애니메이션을 만들기 위해서는
@을 적고 keyframes을
적어주셔야 합니다.
그리고 만들 애니메이션을
이름을 정해주셔야 하죠.
(저는 secur로 지정했습니다)
그리고 from과 to를 적어
어디서부터 어떻게 변하게
될지 정해주는 거죠.
그리고 img(이미지)에
transition이 아닌
animation을 적고
지정한 이름을 적으면 됩니다.
@keyframes secur {
secur이라는 애니메이션을
만들 거야
from {
transform: rotateY(0 deg) scale(0.5);
}
처음은 크기를 반으로 줄이고
0도에서 시작해서
to {
transform: rotateY(360 deg) scale(0.5);
}
}
이후 크기는 반으로 줄이고
Y축을 기준으로 360도
회전시켜
img {
border: 5px solid #000;
border-radius: 50%;
animation: secur 3s ease-in-out;
}
secur이라는 애니메이션을
3초 동안 움직이도록 설정해
그리고 크롬으로 확인하면
이렇게 마우스를 올려놓지 않아도
페이지가 새로 고침 되는 순간
작동하는 애니메이션을
확인할 수 있습니다.
또한 이렇게 infinite을
적게 된다면 단발성으로
3초 동안 작동하고 끝나지 않고
계속해서 애니메이션이
나올 수 있도록 설정할 수도 있죠.
이렇게 계속해서 돌아가게
만들 수도 있는 것이죠.
어렵지 않게 홈페이지 또는
어플을 꾸밀 수 있는 만큼
꼭 기억하시고 꼭 한번
직접 적어가며 해보셨으면
좋겠습니다.
그럼 다을 글에서 이어서
다른 애니메이션에 대해
알려드리도록 할게요.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
