标签：
transition是CSS样式的一个属性，无聊之余看了一下，分享一下。
transition的语法：
transition: property duration timing-function delay;
主要属性
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
这些都看起来比较枯燥，我们就看看具体的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>transition 练习</title> <style type="text/css"> body{ background-color:pink;} #box{ margin:auto; width:200px; height:50px; background-color:green; -webkit-transition:background-color 3s; -moz-trasition:background-color 3s; -o-transition:background-color 3s; } #box:hover{ background-color:red; -webkit-transition:background-color 3s;<!-- 兼容 Safari 和 Chrome --> -moz-trasition:background-color 3s;<!--兼容 Firefox 4 --> -o-transition:background-color 3s;<!--兼容 Opera --> } </style> </head> <body> <div id="box"> transition过度效果 </div> </body> </html>
#box:hover{}就是当鼠标移动到div上时触发{}里面的内容，相当于我们在桌面上右击会得到popMenu一样，是一个Event，都会有Listener监听。
#box{}里面写
-webkit-transition:background-color 3s;
-moz-trasition:background-color 3s;
-o-transition:background-color 3s;
主要是为了当鼠标从box上移开是颜色能够渐变。标签：
原文地址：http://www.cnblogs.com/lzh984294471/p/4961909.html
