CSS3 过渡属性
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
css3过渡（CSS Transition）让动画变的生动更逼真，一起来学习一下CSS Transition。
它是如何工作？
CSS3的过渡效果，让一个元素从一种效果转换到另一种效果，要做到这一点，你必须指定两件事和指定效果的持续时间。
例如：
.className{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
注意：如果未指定动画延迟时间，过渡将没有任何效果，因为默认值是0。
鼠标放上去的时候，变换开始：
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> 样式改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>过渡属性
下表列出了所有的过渡属性:
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠标在图片上面悬停2秒才显示效果</p>
</body>
</html>
汪汪
过渡效果和动画效果有点类似啊
8年前 添加回复 0