CSS3过渡transition
SS3的transition属性详解:
本章节介绍一下transition属性的用法，它也是与动画相关的一个属性。
一.基本知识:
transition翻译成汉语具有"过渡"的意思，也就是说可以让一个元素的css属性值在一定时间段内进行平滑的过渡。
此属性和border、background等属性一样是复合属性。
语法结构:
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
参数解释:
1.transition-property:设置或者检索参与过渡的属性。
2.transition-duration: 检索或设置对象过渡的持续时间。
3.transition-timing-function:检索或设置对象中过渡的动画类型。
4.transition-delay:检索或设置对象延迟过渡的时间。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码演示如何在两秒内将div的宽度以动画的效果从100px设置为500px。
既然是复合属性，那么自然就可以将属性分开分别设置
学习ing
transition翻译成汉语具有"过渡"的意思，也就是说可以让一个元素的css属性值在一定时间段内进行平滑的过渡。
8年前 添加回复 0