모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
모션그래픽
CSS의 최신버전에서는 포토샵이나 플래쉬와 같은 프로그램으로 해야 했던 일을 CSS로도 할 수 있게 되었습니다.
이 수업에서는 CSS의 코드를 통해서 그래픽 작업이나 에니메이션 작업을 하는 방법에 대해서 알려드립니다.
- 전환 (transition) -
전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다.
이와 관련된 것으로는 아래와 같은 속성들이 있습니다.
1. transition-duration
2. transition-property
3. transition-delay
4. transition-timing-function
5. transition
transition_1.html |
<!doctype html> |
전환의 심화내용
transition_2.html |
<!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> |
댓글