CSS3特效之过度transition

transition

语法

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
transition-property：all | none | <property>[ ,<property> ]*：设置对象中的参与过渡的属性,默认值为all
transition-duration：<time>[ ,<time> ]*：设置对象过渡的持续时间，默认值为0
transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )[,重复]*：设置对象中过渡的动画类型
transition-delay：<time>[ ,<time> ]*：设置对象延迟过渡的时间

悬停切换背景

悬停切换背景

.transition-1{
padding:10px 20px;
background-color:#f00;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
transition:background 1s linear;
}
.transition-1:hover{
background-color:#009;
color:#fff;
}

悬停旋转

旋转

.transition-2{
width:100px;
height:100px;
line-height:100px;
text-align:center;
border-radius:50px/50px;
background-color:orange;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
transition:all 1s linear;
}
.transition-2:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}

悬停缩放

放大

.transition-3{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background-color:#369;
-webkit-transition:all .5s linear;
-moz-transition:all .5s linear;
transition:all .5s linear;
}
.transition-3:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
}

组合过渡效果悬停测试效果

抱猫睡觉的鱼

.transition-4{
width:100px;
height:100px;
line-height:100px;
text-align:center;
border-radius:50px/50px;
background-color:#963;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
transition:all 1s linear;
}
.transition-4:hover{
background-color:#909;
color:#fff;
box-shadow:0 0 20px rgba(0,0,0,.7);
-webkit-transform:rotate(720deg) scale(2);
-moz-transform:rotate(720deg) scale(2);
transform:rotate(720deg) scale(2);
}