css transition过渡
css过渡效果
transition设置过渡，transition的属性包括如下图：
| 属性 | 描述 |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
设置格式
为了不同浏览器的效果，需要为其它几种添加相应的前缀标识：
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
如下：
width属性会改变， 用时1秒，速度样式匀速，延时1秒。
transition-property:width;
transition-duration:1s;
transition-timing-function:linear; //过渡效果
transition-delay：1s; //过渡延时
简写格式：transition:width 1s linear 1s;
也可以多属性样式改变，如下：
width,height,transform属性会改变，对应的样式用时1秒中，过渡效果为linear(匀速)，延时1秒
transition-property:width, height,transform;
transition-duration:1s,1s,1s,;
transition-timing-function:linear; //过渡效果
transition-delay：1s; //过渡延时
简写格式：transition:width 1s,height 1s,transform 1s;
以上之后，确定属性改变的时候，可以是在鼠标放在元素上之后：
元素：hover{
width: 150px;
height: 150px;
transform:rotate(360deg);
}需要为其它几种添加相应的前缀标识：
这样就ok 了。！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css的过渡</title>
<style>
#test{
width: 1000px;
margin: auto;
text-align: center;
}
.demo{
width: 100px;
height: 100px;
margin-top: 100px;
text-align: center;
line-height: 100px;
display: inline-block;
background: red;
transition-property: width,height,transform;
transition-duration: 1s;
transition-timing-function: linear;
/* Firefox 4 */
-moz-transition-property:width,height,transform;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
/* Safari 和 Chrome */
-webkit-transition-property:width,height,transform;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear,transform;
/* Opera */
-o-transition-property:width,height,transform;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
}
.demo:hover{
width: 150px;
height: 150px;
line-height: 150px;
background-color: red;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
</head>
<body>
<div id="test">
<div class="demo" style="background-color: yellowgreen">hello word!</div>
<div class="demo" style="background-color: greenyellow">PHP语法</div>
<div class="demo" style="background-color: dodgerblue">object</div>
<div class="demo" style="background-color: chartreuse">c++</div>
<div class="demo" style="background-color: palevioletred">java</div>
</div>
</body>
</html>