[CSS] transition을 이용해 간단한 효과주기.

keyframe으로 애니메이션을 만들어 해결해도 되지만, 더 간단하게 transition을 사용하는 방법이 있다.

transition에 대한 설명을 보면 "CSS 속성을 변경할 때, 애니메이션 속도를 조절하는 방법을 제공한다."

말 그대로, '속도'이다. 예를 들면 색깔을 서서히 다른 색으로 바꾼다던가, 서서히 오브젝트를 돌린다던가 커지게 한다던가.

그런 일을 할 때 쓰면 된다.

keyframe과 transition의 차이는 다음 글에 써야겠다.. 간단하게 말하면 transition은 심플하고 keyframe은 세부적인 효과를 다룰 수 있다.

예를 들면, 굳이 이벤트 형식이 아니더라도 자동으로 움직이고 있는 효과라던가..

공부하던거 그대로 가져온 거라.. 더럽지만.. 여튼, h3의 'navbtn'의 css파일을 코드를 보면, 다음과 같이 되어 있다.

(#header는 무시하자.)

'navbtn 관련 이벤트 발생(여기선 마우스오버)시 background-color 애니메이션 시간을 0.1초로 한다.' 라는 뜻이다.

다음 버튼에 효과를 넣었다.

 

마우스 올리면 

이렇게 변한다. 0.1초동안 싸악 하고 변한다. 

애니메이션으로도 할 수 있지만, 이런 거 할 땐 transition이 나은 듯..

웹 공부를 시작한지 얼마 되진 않았지만 참 재밌는 것 같다. 익숙해지기도 쉬운 듯.