CSS transition

transition 속성은 요소에 정의해두고 마우스 오버시 효과를 다양하게 낼 수 있습니다. IE9 이하버전은 지원하지 않습니다.

a { color:#222; transition: color 2s; }
a:hover { color:#f40; }

색상에 효과를 주는 예제 입니다. 색상에 효과를 줄려면 요소와 호버에 색상이 지정되어 있어야 합니다.

transition-property: Value;
transition-duration: Value;
transition-timing-function: Value;
transition-delay: Value;

transition: property duration timing-function delay

기본값:all 0 ease 0, 상속:안됨, 버전:CSS3

mouse on

<div style="overflow:hidden;border-style: solid; border-width: 1px; border-color: rgb(243, 197, 52); background-color: rgb(254, 254, 184); padding: 10px;" class="width">
mouse on
</div>

transition: property duration , transition:width 2s; -webkit-transition:width 2s; /* Safari */

mouse on

mouse on

mouse on

mouse on

mouse on

mouse on

mouse on

mouse on

transition: background 2s; -webkit-transition:background 2s; /* Safari */

mouse on

transition-timing-function:width 2s linear

mouse on

transition-timing-function:width 2s ease

mouse on

transition-timing-function:width 2s ease-in

mouse on

transition-timing-function:width 2s ease-out

mouse on

transition-timing-function:width 2s ease-in-out

transition-timing-function:

mouse on

transition-delay:, transition: width 2s  5s; -webkit-transition:width 2s 5s;

mouse on

<div style="border: solid 1px rgb(254, 137, 67); padding: 10px;" class="all">mouse on</div>

<style>
div.all {
     width:100px;
     background:#fefefe;
     color:#050505; transition: all 2s linear 1s; 
     -webkit-transition:all 2s linear 1s; /* Safari */ }
div.all:hover { width:200px; background:#f40; color:#fefefe; }
</style>

 transition: all 2s linear 1s

http://1730.tistory.com

<div class="sample">http://1730.tistory.com</div>

<style>
div.sample {
    width:100px;
    height:100px;
    background:red;
    transition:width 1s,
    height 1s,
    transform 1s;
}
div.sample:hover {
    width:150px;
    height:150px;
    transform:rotate(180deg);
}
</style>