[14]코코아톡 챌린지 5일차

오늘은 transition, transform, anmation 에대해 배우고 실습했다.

transition 은 태그 속성들을 가져와 부드럽게 애니메이션을 시켜준다.

예를들면 box태그가 붙은 div에 커서를 올라면 div의 색이 회색에서 빨강으로 부드럽게 변하게 하려고 하자.

그렇다면 이렇게 하면된다.

.box{background-color:grey;

transition: background color .5s linear;}

.box:hover{background color:red;}

 

transform은 물체를 회전시키거나 사이즈를 줄이거나 이동시키거나 할수있는 기능이다

transform에서 쓸수있는 속성들은 너무 많아서 모든 속성이 들어있는 링크를 첨부하겠다.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform

https://webdesignerwall.com/tutorials/easy-css-animation-transition-transforms

Easy CSS Animation With Transition & Transforms - Web Designer Wall

transform도 역시 속성이기때문에 transition에서 선언하고 사용하면 된다.

transition: transform 1s ease-in-out;

 

animation 부분은 관련해서 더 실습해봐야 할 것 같아서 참고할 링크를 적어둬야지.

https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068

CSS 애니메이션 초보자 입문서