css3过渡是元素从一种样式逐渐改变为另一种的效果。
必须有两项内容:
1、规定您希望把效果添加到哪个css属性上
2、规定效果的时长
如果时长未规定,则不会有过渡效果,因为默认为0.
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
300px;
}
如果需要向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
div:hover{
300px;
height:300px;
transform:rotate(180reg);
-o-transform:rotate(180reg);
-webkit-transform:rotate(180reg);
-moz-transform:rotate(180reg);
}
以上两个例子,在鼠标放到元素上之后就会显示动画效果。
transition-timing-function:
linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);//这表示动画的速度
;