CSS3使用transition属性动画效果

613 09-22

CSS中可以使用transition属性来设置动画，结合hover伪类。

transition是CSS3中用来设置场景过渡的效果的，完整的语法是：

transition: [property] [duration] [timing-function] [delay];

transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始

如果我们设置：transition: 2s;表示它的过渡场景执行时长为2秒。一般要配合hover之类的伪类来操作。比如下面的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>transition动画</title>
</head>
<body>

<style type="text/css" media="screen" id="test">
.d1{ width: 200px; height:10px; background-color: #ccc; border-radius: 5px; overflow: hidden;}
.d2{ width: 10px; height: 10px; background-color: #f80; transition: 3s;}
.d2:hover{ width: 200px; }
</style>

<div class="d1">
    <div class="d2"></div>
</div>

</body>
</html>

鼠标移动到d2上时，d2会在3秒内宽度变成200px。当鼠标移走，它又会花3s将宽度重置为10px。

关于CSS使用transition属性来做动画，本文就介绍这么多，希望对您有所帮助。