transition-property 过渡效果的CSS属性名称
10年积累的成都网站建设、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有桥东免费网站建设让你可以放心的选择与我们合作。
transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置（不常用，了解即可）
transform-style 让转换的子元素保留3D转换（不常用，了解即可）
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
方框用过渡走一圈变色用css实现方法
CSS3样式，ClassName = animate
style
.animate{
width:65px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
padding:20px 10px 0px 10px;
display:blcok;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.animate:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:16px;
}
/style
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，比如 :hover 、 :active 或者通过js改变状态。
动画包含两部分，描述动画的样式规则和指定动画开始、结束和中间过程样式的关键帧。
关于动画事件，点击 此处 了解更多。
使用过渡属性 transition可以让页面的模块进行平滑过渡
例子：
html
head
style
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
/style
/head
body
div/div
/body
/html
上面这个例子可以看到长宽100的正方形平滑过渡2s
transition的具体属性值
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
参考
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的style标签中，输入css代码：
button {width: 100px; height: 50px;border: 0;color: white;background: -webkit-radial-gradient(#72787f, #545c64);}
3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。
