[CSS]_프론트엔드의 꽃 @keyframes

keyframe이란?

CSS에서 사용할 수 있는 예약어입니다.

애니메이션의 이름을 생성하고, 그 애니메이션이 각 단계별(프레임별)로 수행할 코드를 작성할 수 있습니다.

다음은 애니메이션을 사용할때 작성하는 구조입니다.

div {
    animation-name: ; /*애니메이션의 이름을 지정합니다.*/
    animation-duration: ; /*애니메이션의 시작에서 끝까지 도달하는 시간을 정합니다.*/
    animaition-timing-fuction: ; /*애니메이션의 속도 곡선을 지정합니다.*/
    animation-delay: ; /*애니메이션 시작 지연을 지정합니다.*/
    animation-iteration-count: ; /*애니메이션의 재생횟수를 지정합니다.*/
    animation-direction: ; /*애니메이션이 실행될 방향을 지정합니다.
    animation-direction에는 normal, reverse, alternate, alternate-reverse 값이 있습니다.*/
    anition: ; 
    /* 모든 애니메이션 속성을 설정하기 위한 약식 속성입니다. 위의 속성값을 순서대로 작성합니다.*/
}

@keyframes 이름 {
    0% { 속성 }
    33% { 속성 }
    66% { 속성 }
    100% { 속성 }
}

이제 실제로 어떤 식으로 작동하는지 살펴보도록 하겠습니다.

---

실습

우선 이전에 배웠던 hover도 활용해 보겠습니다!

hover에 대해서 알고 싶다면 아래 링크를 통해 확인해보세요~

2023.08.09 - [🦴HTML & CSS/style.css] - [CSS]_프론트엔드의 꽃 :hover

[CSS]_프론트엔드의 꽃 :hover

 

 

지구모양 버튼

그럼 기본 세팅을 좀 해주겠습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

기본적인 버튼을 만들었습니다.

단순히 마우스를 롤오버 하면 pointer모양의 커서로 바뀌게 됩니다.

 

 

 

 지구모양 버튼 (위성 만들기)

See the Pen Untitled by filljung (@filljung) on CodePen.

css 코드를 확인해보면 달 버튼에 마우스를 롤오버하고 있으면,

지구 위를 달모양의 버튼이 공전하는 것을 확인할 수 있습니다.

각 단계를 구분해서 애니메이션을 구성해주면 간단히 구현할수 있습니다.

0% : 달이 제자리입니다.

50% : 달이 지구의 반대편에 도달합니다.

100% : 달이 다시 제자리로 돌아옵니다.

이때 디테일을 살리기 위해 z-index속성을 사용했습니다.

z-index는 말그대로 화면에 표시되는 레이어의 우선순위라고 할 수 있겠습니다.

즉, 파워포인트나, 포토샵을 사용하다보면, 레이어의 속성 중 '맨 위에 보이기'와 같은 속성과 같다고 생각하면 됩니다.

 

 

 

transform-function

See the Pen Untitled by filljung (@filljung) on CodePen.

위 코드펜의 CSS 코드를 보면

skew는 X축과 Y축으로 도형을 지정한 각도 만큼 기울일 수 있습니다.

rotate는 단어 의미대로 도형을 회전시킵니다.

translate는 X축과 Y축으로 도형을 이동시킵니다.

scale은 도형을 축소하거나 확대할 수 있습니다.

---

이렇게 애니메이션을 활용해서 다양한 효과를 줄 수 있습니다.

원하는 효과를 적용해서 조금더 동적인 웹페이지를 제작해보세요!