css3动画：过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

请把鼠标移到下面的绿色方块上：

 

 

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

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

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

 

 

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

 

 

实现以上绿色方块过渡效果步骤：

html代码中只定义了一个div，这里不给出代码

 

css代码：当鼠标置于元素上时开始展现动画效果，鼠标移除恢复原样

div{
    width: 100px;
    height:100px;
    background: #24ff39;
    transition-duration:2s,2s ;//设置动画效果的执行时间，第一个参数是width变化的时间，第二个参数是height变化的时间
}

div:hover{
    width: 200px;
    height: 200px;
    background: #ff1323;
    transform: rotate(360deg);
}

 实现效果如下：