CSS를 사용하여 요소에 애니메이션 적용

CSS 애니메이션 🏃

이러한 것들은 강력합니다. 평범한 웹 사이트에 깔끔한 애니메이션을 추가하기 위해 Javascript 라이브러리와 복잡한 노하우가 필요하지 않습니다.

약간의 작업만으로도 개발자 툴킷의 단계에 약간의 힘을 실어줄 수 있습니다.

이 작은 터치는 Lunch Money app에 큰 도움이 됩니다.

https://media.giphy.com/media/UuQ2thBL0UCOJUcKSY/giphy.gif

저는 2020년 초에 Jen과의 Indie Hacker 팟캐스트 인터뷰를 듣고 이 애니메이션을 다시 보았고 그 이후로 계속 저에게 붙어 있습니다.

이제는 세부 사항에 관해서는 기발한 편입니다. 그러나 요점은 여전히 ​​유효하다고 생각합니다. 애니메이션(잘 사용됨)은 관심을 끌고 영향을 미칩니다.

요소 회전 만들기 💫

저는 <div> 회전을 만들고 싶었던 작은 사용 사례(정말 호기심입니다)가 있습니다.

간단하죠? 하지만 꽤 눈길을 끌죠!?

HTML

해보자. 단순함을 위해 div를 사용했습니다. 원하는 요소에 대해 이 작업을 수행할 수 있습니다.

<div class=circle></div>

CSS 클래스 🖼

You're only limited by your imagination + your perseverance.

원을 원합니다. 그래서:

.circle{
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

회전하는 것을 확인하고 싶기 때문에 점선 테두리를 추가하겠습니다.

.circle{
    border-radius: 50%;
    height: 200px;
    width: 200px;
    border: dashed white thick;

그런 다음 마무리하기 위해 애니메이션 속성을 추가합니다.

.circle{
    border-radius: 50%;
    height: 200px;
    width: 200px;
    color: white;
    border: dashed white thick;
    animation: spinner 2s infinite linear;
}

좋아, 하지만 아직 아무것도 하지 않을거야. 그 animation 속성을 일부 keyframes 👇로 지시해야 하기 때문입니다.

CSS 키프레임 🎬

Keyframes은 서로 다른 시점에서 발생해야 하는 사항을 지정합니다.

Lunchmoney 예를 다시 보면 동전이 위에서 시작하여 아래로 내려가 다시 위로 튕겨 나옵니다.

시간의 핵심 지점과 같은 키프레임에 대해 생각해 보십시오. 시간이 0(또는 0%)이면 작은 동전 아이콘이 맨 위에 있습니다. 시간이 중간(50%)이면 바닥에 있습니다. 그런 다음 루프가 종료되면(100%) 다시 정상으로 돌아와 다시 내려갈 준비가 됩니다.

우리가 해야 할 일은 CSS에 한 번의 반복을 수행하도록 지시한 다음 일정 시간 동안 계속 반복하는 것입니다. (우리의 경우, 그것은 영원합니다😂).

이것 좀 봐:

@keyframes spinner{
  0% {background-color: #3B82F6;}
  50% {background-color:#1E293B;transform:rotate(180deg);}
  100% {background-color: #3B82F6;transform:rotate(360deg);}
}

우리는 키프레임을 선언하고( @keyframes ), 이름을 지정합니다( spinner ). 그런 다음 특정 시점에서 수행해야 할 작업을 알려줍니다( 0%,50%,100% ).

회전하는 원에 대한 위의 예에서 배경색을 파란색에서 다른 파란색으로 변경하고 0deg에서 180deg, 360deg로 회전합니다.

이제 1회 반복에 대한 지침이 마련되었으므로 CSS 클래스의 애니메이션 라인을 다시 살펴보세요.

.circle{
    animation: spinner 2s infinite linear;
}

CSS는 이제 spinner라는 키프레임을 사용하는 것을 알고 있습니다. 우리는 또한 다른 중요한 것들을 말했습니다. 2s는 물론 2초입니다. 2초 동안 0%에서 100%까지 키프레임 반복을 수행하도록 지시하고 있습니다. infinite는 이 작업을 영원히 계속하도록 알려줍니다.

그리고 linear는 일정한 변화율을 유지하도록 알려줍니다. 우리 원의 경우 전환 지점(0%,50%,100% 지점) 주변에서 더 빠르거나 느리게 회전하는 것을 원하지 않습니다.

체크 아웃할 수 있는 다른 옵션이 많이 있으며 평소와 같이 MDN이 갈 곳입니다.

시간을 2초가 아닌 10초로 설정한 다음 선형을 ease-in-out으로 변경하면 다음과 같이 됩니다.

.spinner2{
    animation: spinner2 10s infinite ease-in-out;
}

이제 전체 회전을 완료하는 데 10초가 걸리기 때문에 전체적으로 속도가 느려집니다. 그리고 그것은 또한 느리게 시작하여 "최대 속도"로 완화된 다음 각 회전이 끝날 때 다시 느려집니다.

감사! 🙏

도움이 되었기를 바랍니다. CSS 애니메이션을 잘 사용하면 페이지를 멋지게 꾸밀 수 있습니다. 여러분의 생각과 프로젝트에서 애니메이션을 어떻게 사용했는지 알려주세요. 아래에 의견을 남기거나 저와 연결하십시오! 👋

https://media.giphy.com/media/l3q2wJsC23ikJg9xe/giphy.gif