transition Css3 상세 정보

    ：



.example {   

    transition-property: background-color;     //     css  

    transition-duration: 2s;               //        

    transition-timing-function: ease-in;   //     

    transition-delay: 1s;   //       

} 



     css       ：

    :



example {   

    transition: background-color 2s ease-in 1s;   

} 



    ：



.example {   

    transition:  background-color  2s ease-in 1s,   

                 width  2s ease-in-out,   

                 height 3s ease-out;   

} 





      ：----    click  hover       



1、    ，          hover   1s     ；

.example {   

    background-color: green;   

    transition: background-color  2s ease-in 1s;   

}   

.example:hover {   

    background-color: blue   

} 





2、           ，        ，        "  "   。

.example {   

    width: 200px;   

    height: 200px;   

    transition: width  2s ease-in;   

}   

.example:active {   

    width: 400px;   

} 



3、         input   ；

input {   

    width: 200px;   

    transition: width 2s ease-in;   

}   

input:focus {   

    width: 250px;   

}  



4、            ；

.example {   

    width: 200px;   

    height: 200px;   

    background:#000;

    -webkit-transition: width 2s ease,   

      height 2s ease, background 2s ease;

    -webkit-transform: translateZ(0);   

}   

.example:hover {   

    width: 300px;   

    height: 300px;   

    background:green;

} 

 
 

　　CSS  ：

[css]  

#timings-demo {border: 1px solid #ccc;padding: 10px;height: 400px;width: 400px;}  

.box {width: 100px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 10px;  

    -webkit-border-radius: 5px;  

    -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);  

}  

/*      ：*/          

#ease {background: #f36;  

    -webkit-transition: all 5s ease 0.3s;  

}  

/*    ：*/  

#ease-in {background: #369;  

     -webkit-transition: all 3s ease-in 0.5s;  

}  

/*    ：*/  

#ease-out {background: #636;   

    -webkit-transition: all 5s ease-out 0s;  

}  

/*         ：*/  

#ease-in-out {background: #3e6;  

    -webkit-transition: all 1s ease-in-out 2s;  

}  

/*    ：*/  

#linear { background: #999;  

    -webkit-transition: all 6s linear 0s;  

}  

/*                 ：*/  

#cubic-bezier {background: #6d6;  

    -webkit-transition: all 4s cubic-bezier 1s;  

}  

/*hover      click   box      */  

#timings-demo:hover .box {  

    -webkit-transform: rotate(360deg) scale(1.2);  

    -webkit-border-radius: 25px;  

}