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。
既然是复合属性,那么自然就可以将属性分开分别设置


继续学习
||
<!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>
提交重置代码
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!