CSS_Transition

오늘은 CSS에서 Transition이라는 것에 대해서 알아볼게요.

음.... Transition은 장면 전환을 할때 쓰는거에요.

그래서 애니매이션효과(?)를 나타낼 수 있어요~!!ㅎㅎ

그럼 코딩을 해보도록 할게요.

보시는 바와 같이 코딩을 했는데요...

하나하나 보도록 하겠습니다.

먼저 Style 태그 안을 보도록 하겠습니다.

먼저 a태그에 대해서 속성들을 적용 시켰는데요

먼저 font-size 글자 크기는 3rem으로,

display 는 inline-block으로,

transition-property : all 이것은 모든 것들에 대해서 변화를 주겠다는 것을 의미하고요, 

transition-duration : 0.1s 는 0.1초동안 변화를 주겠다는것을 의미해요.

그리고 a : active는 클릭했을때의 속성을 의미해요.

transform :  translate(20px,20px)는 현재위치에서 클릭했을때 x축으로 20px, y축으로 20px이동한것을 의미해요.

그럼 실행시켜 보도록 하겠습니다.

20px만큼 이동된게 느껴지시나요....?ㅎㅎ

이건 직접 해보면 오.....이런 반응이 나오는 기능이에요ㅋㅋㅋ

그럼 오늘도 간단하게 코딩을 함으로써 이런 기능도 있다는것을 알아가요!ㅎㅎ

감사합니다~