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>
效果图:

过渡前的:

过渡后的:



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

css3Transition主要效果平缓过渡

  • 2015年05月14日 15:23
  • 21KB
  • 下载

CSS3 transition 属性过渡效果 详解

CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添...

CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现。所以请大家明白,特别是We...
  • judyge
  • judyge
  • 2016年07月08日 16:49
  • 352

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...

CSS3过渡动画transition详解

CSS3过渡动画transition详解 transition是指过渡动画,让css属性的变化是可连续的、可控时间的、可控变化曲线的做出改变,无论是鼠标事件还是点击事件,只要设置的CSS属性发生...

【CSS3】动画--过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay...

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

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

用css3的transition实现过渡动画

CSS3,用transition实现过渡动画 用到了transition就先说说这个属性吧! 一、transition属性简介 transition是网页上的过渡动画,变化的逐渐过渡效果...

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

css3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transitio...

CSS3元素过渡属性transition

过渡动画是动画的基础 在学习动画属性之前 我们需要先了解过渡属性transition过渡transition先来看一个小例子.demo { width: 100px; height...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的transition 过渡效果
举报原因:
原因补充:

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