소개
전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다.
- transition-duration
- transition-property
- transition-delay
- transition-timing-function
- transition
전환의 기본 사용법
예제 - transition_1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html><html><head> <style> a{ font-size:3rem; display:inline-block;/* transition-property: font-size transform; transition-duration: 0.1s; transition:all 0.1s;*/ transition:all 0.1s; } a:active{ transform:translate(20px, 20px); font-size:2rem; } </style></head><body> <a href="#">Click</a></body></html> |
codepen.io
전환의 심화내용
예제 - transition_2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!doctype html><html><head> <style> body{ background-color: black; transition:all 1s; } div{ background-color: black; color:white; padding:10px; width:100px; height:50px; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } div:hover{ height:400px; } </style></head><body onload="document.querySelector('body').style.backgroundColor='white';"> <div> TRANSITION </div></body></html> |
