12. 트랜지션(transition)
- 요소가 이벤트에 의해 값이 바뀔 때 애니메이션을 생성
■ 속성
- trnasition-delay : 이벤트 발생 후 딜레이 시간
- transition-duration: 트랜지션 지속시간
- transition-property : 트랜지션 할 속성
- transition-timing-function : 속도변형 함수
(참고) http://cubic-bezier.com/ 사이트에서 transition 속성값을 생성할 수 있음)
■ 적용할 수 있는 커브 라이브러리의 종류 (위 사이트 참조)
- linear(기본값 = 등속)
- ease
- ease-in
- ease-out
- ease-in-out
■ 효과를 줄 수 있는 속성들의 예
1) 위치 : top, left, right, bottom
2) 크기 : width, height
3) 박스 : margin, padding
4) 테두리 : border-width, border-radius, border-color
5) 컬러 : color, background-color
6) 투명도 : opacity
7) 변형 : transform(css3)
■ 예제
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>트랜지션</title> <style type="text/css"> *{margin:0; padding:0;} body{padding: 30px;} .spacer{height: 50px;} .aa{width: 100px; height: 100px; background-color: #f00; transition-duration: 1s;} .aa:hover{width: 150px; height: 150px; background-color: #00f;} .bb{width: 100px; height: 100px; background-color: #0f0; transition-duration: 1s; transition-property: width; transition-timing-function: cubic-bezier(.24, .65, .82, -0.080)} .bb:hover{width: 200px; background-color: #f00;} </style> </head> <body> <div class="aa"></div> <div class="spacer"></div><!--여백--> <div class="bb"></div> </body> </html> |
■ 실행결과
※ 첫번째 그림은 트랜지션을 적용하기 전 화면입니다.
※ 첫번째 상자에 마우스를 올리면, 1초 안에 배경색과 크기가 변하게 됩니다.
※ 두번째 상자에 마우스를 올리면, 1초 안에 배경색과 가로 길이가 변하게 됩니다. 이 때, cubic-bezier 속성을 통해 적용시킨 값대로 움직임이 변하게 됩니다.
※ 실제 코드를 실행 시켜보시고, http://cubic-bezier.com/ 사이트에서 커브 라이브러리와 duration을 바꿔가면서 사용해 보시기를 권장합니다. 캡쳐된 화면만 보고 이해하기는 어려울 것 같아요~
※ 트랜지션 속성 때문에, 스크립트를 적용하지 않더라도 동적인 스타일을 만들 수 있게 됐네요^^ 조금 복잡해 보여도 예쁜 스타일을 위해서 알아두면 좋겠죠?