[CSS] 동작 천천히 만드는 애니메이션

CSS hover 기능을 쓸 때

너무 딱딱 끊기는 느낌을 바꾸고 싶었던 적 있으신가요?

자연스럽게 천천히 동작하는 애니메이션으로 구현하고 싶을 때 사용해 봅시다!

 

---

1. 준비

①  button 만들기

일단 애니메이션을 적용할 버튼을 만들어줍니다. 꼭 버튼이 아니어도 됩니다.

디자인은 각자 마음에 들게 만들어주시고

hover를 이용해 opacity를 조절해 주세요.

 

button:hover{
	opacity:0.5; /* 투명도 조절 */
  	cursor:pointer; /* 마우스 올렸을 때 손모양 마우스 */
}

 

hover에는 opacity와 cursor만 넣었습니다.

 

 

 

320x100

 

---

2. transition

button:hover{ 
	opacity:0.5; /* 투명도 조절 */
    cursor:pointer; /* 마우스 올렸을 때 손모양 마우스 */
    transition: all 0.5s ease-out; /* 애니메이션 천천히 */ 
}

①  transition 추가

천천히 동작하는 애니메이션을 위해 transition을 추가합니다.

단축 속성으로 사용하며 더 자세한 설명은 아래 링크를 확인해 주세요.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transition#examples

transition - CSS: Cascading Style Sheets | MDN

 

속성 값	의미
all	말 그대로 모두. (여기서는 hover에 적용된 css 모두. 즉, opacty)
0.5s	0.5초 동안. 0.5초 안에 동작이 모두 이루어진다.
ease-out	속도 값 (정확하게는 cubic-bezier( 0, 0, 0.58, 1 ) 라는 속도 그래프 값과 동일.)

속도 그래프 추가 설명해 보자면

초반에는 느리다가 끝으로 갈수록 빨라지는

그런 애니메이션을 그래프로 조절할 수 있습니다.

 

ease-out은 그런 그래프 값이 고정된 하나의 케이스로 사용하고 있어요.

너무 어려우니까 깊게 들어가지 마시고

그냥 저런 속성을 쓰는구나 하고 넘어가셔도 됩니다.

 

 

 

②  예시 코드

예시 코드를 올려두었으니 편하게 확인해 보세요.

마우스를 올리면 opcity가 천천히 변하는 것을 알 수 있습니다.

이제 CSS 동작도 세련되게 넣어보세요.

 

-

 

-

 

 

---

3. 다른 레퍼런스

https://ssimplay.github.io/

references

①  레퍼런스

웹디자인 시 사용 가능한 다른 다양한 레퍼런스를 정리해두고 있어요.

아직 조금이지만 앞으로도 계속 업데이트해보겠습니다.

편하게 쓰고 가세요~

 

---

이상으로 css 동작 천천히 만드는 애니메이션이었습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - [CSS] flex를 이용한 가운데 정렬

[CSS] flex를 이용한 가운데 정렬

[coding/html + css] - css flex 가로 정렬

css flex 가로 정렬

 

그럼 이만.

총총.