문법
transition property duration timing-function delay;
사용예
-webkit-transition: all 2s ease;
JavaScript로 사용
object.style.transition=“width 2s”;
Prefix
-o-box-shadow
-moz-box-shadow
-webkit-box-shadow
Prefix 는 표준제정 이후에도 유효
---------------------------------------------------------------------------
Property Description
---------------------------------------------------------------------------
transition-property transition 효과의 CSS 속성 명칭
transition-duration 효과가 적용되는 시간 (1/1000초 단위)
transition-timing-function transition 효과가 적용되는 속도 (예:점점빠르게, 점점느리게)
transition-delay 효과가 언제 시작 되는지 값
---------------------------------------------------------------------------
다음 소스를 실행해 봅시다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s, height 1s;
}
div:hover
{ width:200px; height:200px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
다음처럼 노란 사각형에 롤오버하면 자연스럽게 커지는 모션을 보실 수 있습니다.
'WEB_TECH > CSS3' 카테고리의 다른 글
| css3 transform을 사용하여 모양 변형 시키기 (0) | 2013.06.19 |
|---|---|
| css3 모서리가 둥근 사각형 만들기 (0) | 2013.06.19 |
| css3를 사용하여 box-shadow 그림자 구현하는 방법 (0) | 2013.06.19 |
| opacity 사용하는 방법 (0) | 2013.06.19 |
| font-face (0) | 2013.05.08 |
