반응형

Transition 트랜지션 (화면전환)

l transition-property : 엘리먼트의 효과를 함께 적용할 속성들

l transition-duration : 장면전환의 시간을 설정한다

l transition: (property | duration , property | duration) 을 함께 쓸수있다

l transition:-delay : 장면전환이 시작될때 약간의 딜레이를 주고 할수있다.

l transition:-timing-function : 장면전환이 될떄의 x,y의 시간차 전환


◎ transition-timing-function 속성

▼ 내용

안에 있는 property 중 cubic-bezier(); 안에 숫자를 입력하면 속도롤 커스텀마이징 할수있다.

​​https://matthewlein.com/tools/ceaser


◎ transition 과 transform 합친 예제

▼ 내용

div 크기가 줄어들면서 회전한다.

<html> <head> <style> div{ height:200px; width:200px; background:blue; color:White; transition: all .5s ease-in-out; /*모든 속성에대해 장면전환 transition 적용*/ } div:hover{ transform: rotate(5turn) scale(0.5,0.5); /*5번 회전 , 크기 1/2배로 줄임*/ background-color : red; color : green; } </style> </head> <body> <body> <div>안녕</div> </body> </body> </html>


반응형

+ Recent posts