강아지 애니메이션
Fug와 SCSS를 활용해 만든 강아지 애니메이션입니다.
Fug는 HTML을 간편히 쓰기 위해 나온 언어로 ".*" 형태로 class를 표현할 수 있습니다. 들여쓰기를 통해 부모요소와 자식요소를 구분하게 되지만 코드가 길어지면 육안으로 구별하기 힘들어질 수 있는 단점이 있습니다.
SCSS 역시 css를 좀 더 간편히 쓰기 위해 나온 언어입니다. "$"를 써서 변수 처럼 사용할 수 있으며, 하나의 구조에 여러개의 다른 선택자를 넣어 중첩해 사용할 수 있는 특징이 있습니다.
▶ 애니메이션 효과
.dog-tail {
animation: dog-tail-segment $interval $easing infinite alternate;
@keyframes dog-tail-segment {
0% {transform: rotate(-20deg)}
100% {transform: rotate(20deg)}
}
}
강아지 애니메이션에서 꼬리를 흔들 떄 사용된 애니메이션 예시입니다.
애니메이션은 동작하고 싶은 요소에 "animantion"을 주고 동작 시간, 속도, 반복 횟수 등을 적어 움직이게 할 수 있습니다.
또한 "keyframes"를 사용하면 프레임에 따라 좀 더 세부적으로 움직임을 구현할 수 있게 됩니다.
| 속성 | 설명 |
|---|---|
| animation | 애니메이션 효과를 설정합니다. |
| ease-in-out | 애니메이션의 시간 별 속도를 설정합니다. |
| infinite | 애니메이션을 계속 반복하도록 합니다. |
| alternate | 애니메이션이 한번 움직인 후 다음 행동을 반대 방향으로 움직이도록 설정합니다. |
| keyframes | 애니메이션의 프레임 별 동작을 설정합니다. |
| transform | 애니메이션의 동작 형태를 설정합니다. |
| transform-origin | 애니메이션 동작 설정할 때 중심축을 설정합니다. |
| rotate | 애니메이션 동작 시 회전하도록 합니다. |
| translate | 애니메이션 동작 시 좌표 축에 따라 이동하도록 합니다. |
댓글