炫意html5
中国最早CSS3和HTML5移动开发技术网站之一

利用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]

炫意HTML5 » 利用css3的transition实现slide

分享到:更多 ()

html5游戏css3教程