利用css3的transition实现slide
最近感觉自己对css3动画一知半解，没有去认真揣测其中参数的含义。今天利用空闲时间，先从常用的transition来入手。
Transition对应的CSS属性列表：
1、transition-property
* 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.
2、transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.
3、transition-timing-function
* 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。
* 初始默认值为default.
4、transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.
有兴趣的可以看看我利用transition实现slide幻灯片demo。
[html] <meta charset="UTF-8" /> <title>CSS3 Slide</title> <style>
*{ margin:0; padding:0;}
#page-wrap{text-align:center;}
#page-wrap h1{line-height:50px;}
#slideshow{
margin:100px auto;
height:195px;
width:269px;
position: relative;
overflow: hidden;
}
#slideshow > ul {
height:195px;
width:1076px;
position: absolute;
top: 0;
left: 0;
height: 100%;
-moz-transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
/* Slow */
-webkit-animation: moveSlideshow 8s linear infinite;
-moz-animation: moveSlideshow 8s linear infinite;
-webkit-transform: translate3d(0,0,0); /* Performance */
}
#slideshow > ul li{ float:left;}
@-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-807px);
-moz-transform: translateX(-807px);
transform: translateX(-807px);
}
}
@-moz-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-807px);
-moz-transform: translateX(-807px);
transform: translateX(-807px);
}
}
</style></p>
<div id="page-wrap">
<h1>CSS3 Slide</h1>
<div id="slideshow">
<ul>
<li><img src="http://img03.taobaocdn.com/tps/i3/T1Ln5kXmRzXXXXXXXX-269-195.png" /></li>
<li><img src="http://img04.taobaocdn.com/tps/i4/T1svOXXhJAXXXXXXXX-269-195.jpg" /></li>
<li><img src="http://img03.taobaocdn.com/tps/i3/T1kLV6Xn0HXXXXXXXX-269-195.png" /></li>
<li><img src="http://img03.taobaocdn.com/tps/i3/T1Ln5kXmRzXXXXXXXX-269-195.png" /></li>
</ul>
</div>
</div>
<p>[/html]