CSS3的transition属性

最新推荐文章于 2022-11-16 16:14:00 发布

简生

最新推荐文章于 2022-11-16 16:14:00 发布

阅读量1.9k

点赞数 2

分类专栏： CSS 文章标签： transition css function tabs javascript 浏览器

本文链接：https://blog.csdn.net/jiancm2001/article/details/7640955

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

transition ：CSS3动画属性

更详细的内容去: http://www.w3cplus.com/content/css3-transition

transition主要包含四个属性值：

执行变换的属性：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

变换延续的时间：单位s

transition-duration ： <time> [, <time>]*

在延续时间段，变换的速率变化：

变换延迟时间：单位s

transition-delay ： <time> [, <time>]*

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

Demo：http://jsfiddle.net/BUv8A/embedded/result/

<style type="text/css">
#container{
	border:1px solid #aaa;
	border-radius:10px;
	padding:0 5px;
}
#btn1, #btn2, #btn3, #btn4, #btn5 {
	width:10%;
	height:20px;
	border-radius:5px;
	margin:5px 0;
	background-color:#999;
	overflow:hidden;
}
#btn1 {
	-webkit-transition:width 3s linear; 
}
#btn2 {
	-webkit-transition:width 3s ease; 
}
#btn3 {
	-webkit-transition:width 3s ease-in; 
}
#btn4 {
	-webkit-transition:width 3s ease-out; 
}
#btn5 {
	-webkit-transition:width 3s ease-in-out; 
}
#container:hover > div {
	width:100%;
}
</style>
<div id="container">
	<div id="btn1">linear(匀速)</div>
	<div id="btn2">ease(逐渐变慢)</div>
	<div id="btn3">ease-in(加速)</div>
	<div id="btn4">ease-out(减速)</div>
	<div id="btn5">ease-in-out(加速然后减速)</div>
</div>

考虑到transition属性还没完全成为标准，针对不同浏览器的写法如下：

a { 
	-moz-transition: all 0.5s ease-in; 
	-webkit-transition: all 0.5s ease-in; 
	-o-transition: all 0.5s ease-in; 
	transition: all 0.5s ease-in; 
}

如果需要对不同属性实现不同的动画效果：

a { 
	-moz-transition: background 0.5s ease-in,color 0.3s ease-out; 
	-webkit-transition: background 0.5s ease-in,color 0.3s ease-out; 
	-o-transition: background 0.5s ease-in,color 0.3s ease-out; 
	transition: background 0.5s ease-in,color 0.3s ease-out; 
}

浏览器兼容情况：

补充一点点东西。

试了一下，利用简单的JavaScript代码绑定click事件，结合CSS3的transition属性，就能实现幻灯片切换效果。

简单快捷，大家可以和 setInterval 说拜拜了~！

Demo1：http://jsfiddle.net/cJ5rs/embedded/result/

<style type="text/css">
#container {
	position: relative;
	width:350px;
	height:250px;
	overflow:hidden;
	float:left;
}
#container img {
	opacity:0;
	left:-350px;
	-webkit-transition:opacity 2s, left 1s;
	-moz-transition:opacity 2s, left 1s;
	-o-transition:opacity 2s, left 1s;
	-ms-transition:opacity 2s, left 1s;
	transition:opacity 2s, left 1s;
	position:absolute;
}
#tabs {
	float:left;
	padding:0 5px 0 0;
}
#tabs span {
	text-align:center;
	margin:2px 1px;
	border: 1px solid #aaa;
	border-radius: 5px;
	display:block;
	width:18px;
	height:18px;
	box-shadow:#555 1px 1px 5px;
	cursor:pointer;
}
</style>
<div id="tabs">
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
</div>
<div id="container">
	<img src="http://www.placehold.it/350x250">
	<img src="http://www.placehold.it/350x250/ff0000">
	<img src="http://www.placehold.it/350x250/00ff00">
	<img src="http://www.placehold.it/350x250/f0f00f">
	<img src="http://www.placehold.it/350x250/0000ff">
</div>


<script type="text/javascript">
var domSpans = document.getElementById("tabs").getElementsByTagName("span");
var domImgs = document.getElementById("container").getElementsByTagName("img");
for(var i = domSpans.length; i--; ) {  
    domSpans[i].onclick = function(num) { 
        return function() {
			for(var j = domSpans.length; j--; ) {
				domSpans[j].style.backgroundColor = "";
				domImgs[j].style.opacity = 0;
				domImgs[j].style.left = "-350px";
			}
			domSpans[num].style.backgroundColor = "#ccc";
			domImgs[num].style.opacity = 1;
			domImgs[num].style.left = "0px";
        }  
    }(i);  
}  
domSpans[0].style.backgroundColor = "#ccc";
domImgs[0].style.opacity = 1;
domImgs[0].style.left = "0px";
</script>

Demo2：http://jsfiddle.net/N5F4A/embedded/result/

<style type="text/css">
#container {
	width:350px;
	height:250px;
	overflow:hidden;
	display:block;
}
#container img {
	opacity:0.5;
	line-height:250px;
	margin-top:125px;
	float:left;
	display:inline;
	-webkit-transition:opacity 1s, height 1s, margin-top 1s;
	-moz-transition:opacity 1s, height 1s, margin-top 1s;
	-o-transition:opacity 1s, height 1s, margin-top 1s;
	-ms-transition:opacity 1s, height 1s, margin-top 1s;
	transition:opacity 1s, height 1s, margin-top 1s;
}

#tabs {
	padding:10px 0 0 0;
}
#tabs span, #btnL, #btnR {
	text-align:center;
	margin:2px 1px;
	border: 1px solid #aaa;
	border-radius: 5px;
	display:inline;
	float:left;
	width:18px;
	height:18px;
	box-shadow:#555 1px 1px 5px;
	cursor:pointer;
}

#btnL.undo, #btnR.undo {
	background:#333;
}
</style>


<div id="container">
	<img src="http://www.placehold.it/350x250" style="height:250px;margin-top:0px;">
	<img src="http://www.placehold.it/350x250/FF0000">
	<img src="http://www.placehold.it/350x250/00FF00">
	<img src="http://www.placehold.it/350x250/F0F0F0">
	<img src="http://www.placehold.it/350x250/0000FF">
</div>

<div id="tabs">
	<div id="btnL" class="undo"><</div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<div id="btnR">></div>
</div>


<script type="text/javascript">
var domSpans = document.getElementById("tabs").getElementsByTagName("span");
var domImgs = document.getElementById("container").getElementsByTagName("img");
var domBtnL = document.getElementById("btnL");
var domBtnR = document.getElementById("btnR");
var index = 0;
var imgsNum = domImgs.length;

function checkBtn() {
	if(index === 0) {
		domBtnL.className = "undo";
		domBtnR.className = "";
	} else if( index === imgsNum - 1 ){
		domBtnR.className = "undo";
		domBtnL.className = "";
	} else {
		domBtnL.className = "";
		domBtnR.className = "";
	}
}

function editDefault(i) {
	domSpans[i].style.backgroundColor = "";
	domImgs[i].style.opacity = 0;
	domImgs[i].style.height = "0px";
	domImgs[i].style.marginTop = "125px";
}

function editNow(i) {
	domSpans[i].style.backgroundColor = "#ccc";
	domImgs[i].style.opacity = 1;
	domImgs[i].style.height = "250px";
	domImgs[i].style.marginTop = "0px";
}

for(var i = imgsNum; i--; ) {
    domSpans[i].onclick = function(num) { 
        return function() {
			index = num;
			checkBtn();
			for(var j = imgsNum; j--; ) {
				editDefault(j);
			}
			editNow(num);
        }  
    }(i);  
}

domBtnL.onclick = function() {
	if(index === 0) {
		return;
	}
	index--;
	checkBtn();
	for(var j = imgsNum; j--; ) {
		editDefault(j);
	}
	editNow(index);
}

domBtnR.onclick = function() {
	if(index === imgsNum - 1) {
		return;
	}
	index++
	checkBtn();
	for(var j = imgsNum; j--; ) {
		editDefault(j);
	}
	editNow(index);
}

domSpans[0].style.backgroundColor = "#ccc";
domImgs[0].style.opacity = 1;

</script>

简生

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3的transition属性

transition ：CSS3动画属性更详细的内容去: http://www.w3cplus.com/content/css3-transitiontransition主要包含四个属性值：执行变换的属性：transition-property ： none | all | [ ] [ ',' ]* 变换延续的时间：单位s
复制链接

扫一扫