CSS过渡transition CSStransition|CSS2

CSS过渡是添加的效果, 用于在不使用Flash或JavaScript的情况下将元素从一种样式逐渐更改为另一种样式。

你应该指定两件事来创建CSS过渡。

要在其上添加效果的CSS属性。
效果的持续时间。

让我们来看一个示例, 该示例定义对width属性和3秒持续时间的过渡效果。
注意：如果不指定持续时间部分, 则过渡将不起作用, 因为其默认值为0。当将光标移到元素上时, 过渡效果将开始。注意：IE9和更早版本不支持transition属性。

< !DOCTYPE html> < html> < head> < style> div{ width: 100px; height: 100px; background: orange; -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s; } div:hover { width: 300px; } < /style> < /head> < body> < div> < /div> < p> Move the cursor over the div element above, to see the transition effect.< /p> < /body> < /html>

注意：将鼠标光标从元素中移出时, 它将逐渐获得其原始样式。CSS多重过渡效果它用于为多个CSS属性添加过渡效果。如果要对多个属性添加过渡效果, 请用逗号分隔这些属性。
【CSS过渡transition】让我们举个例子。在此, 过渡对宽度, 高度和变换产生影响。

< !DOCTYPE html> < html> < head> < style> div { padding:15px; width: 150px; height: 100px; background: violet; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } div:hover { width: 300px; height: 200px; -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); } < /style> < /head> < body> < div> < b> srcmini.com< /b> < p> (Move your cursor on me to see the effect)< /p> < /div> < /body> < /html>