CSS3（8）过渡

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

 

代码：

<style>
div
{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}
</style>

还可以指定每个方向上的速度：

看我

代码：

div.div2
{
width:100px;
height:100px;
background:red;
transition:width 2s,height 2s,transform 2s;
}
div.div2:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}