css3的transition 过渡效果

原创 2013年12月03日 18:15:02

浏览器支持

属性 浏览器支持
transition          

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。


过渡属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:100px;
		height:100px;
		background:#0FF;
		position:absolute;
		font-weight:bold;
		padding:20px 10px 0px 10px;
		float:left;
		margin:5px;
		text-align:center;
		transition: width 2s, height 2s;
		-moz-transition:width 2s , height 2s , -moz-transform 2s;
		-webkit-transition:width 2s, height 2s, -webkit-transform 2s; 
		-o-transition:width 2s, height 2s, -o-transform 2s;
		-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
		border-radius:5px;
		-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;
		opacity:0.4;
	}	
	div:hover{
		width:200px;
		height:200px;
		background:#0F0;
		opacity:1;
		font-size:16px;
		text-align:center;
		transform:rotate(360deg);
		-moz-transform:rotate(360deg); /* Firefox 4 */
		-webkit-transform:rotate(360deg); /* Safari and Chrome */
		-o-transform:rotate(360deg); /* Opera */
	}

</style>
<title>无标题文档</title>
</head>

<body>
<div>transtion的过渡效果</div>
</body>
</html>
效果图:

过渡前的:

过渡后的:



版权声明:原创文章,请标明出处~~~

css3 Transition属性(平滑过渡菜单栏案例)

css3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transitio...
  • yy211zhu
  • yy211zhu
  • 2016年10月27日 14:30
  • 2057

CSS3的过渡效果(transition)与动画(animation)

H5 web开发
  • u011388741
  • u011388741
  • 2016年01月09日 19:14
  • 4019

【CSS3】transition过渡和animation动画

写在前面的话: 之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年07月23日 11:06
  • 22956

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。...
  • actorWen
  • actorWen
  • 2017年12月14日 10:09
  • 211

CSS3特效之转化(transform)和过渡(transition)

在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(tr...
  • bingkingboy
  • bingkingboy
  • 2016年04月17日 20:31
  • 7188

CSS3 如何让height:auto实现transition过渡效果

CSS3 如何让height:auto实现transition过渡效果
  • jiongxian1
  • jiongxian1
  • 2017年07月30日 12:15
  • 317

Css3 过渡(Transition)特效回调函数

Css3 出来之后,可以说是替代了Flash,通过使用Html5和Css3的完美结合,就可以做出任何你想得到的特效,这里不再阐述。。。 最近在做一个喝水签到的功能,在想签到成功之后,签到框可以模拟被水...
  • qqHJQS
  • qqHJQS
  • 2015年12月25日 09:45
  • 2590

【css3初级】transition过渡效果写法,鼠标放到图片上图片变小

transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中,比如说hover,onmouseover,onclick事件等。 下面就给大家介绍下transition的简单用...
  • sinat_21206105
  • sinat_21206105
  • 2016年08月25日 15:29
  • 1116

解决display无法使用transfrom过渡效果

如 demo (如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然...
  • Mrcxt
  • Mrcxt
  • 2016年08月16日 22:15
  • 3800

CSS3 transition属性和Hover效果

w3cschool上其实有很详细的基本属性内容: transition:【属性】【变换延续的时间 】【速率】 属性怎么理解…假如有一个div宽度是200px ....
  • GrahamACER
  • GrahamACER
  • 2016年09月14日 21:52
  • 978
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的transition 过渡效果
举报原因:
原因补充:

(最多只允许输入30个字)