CSS3 transition 属性

transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”

一、transition语法:

transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>||
<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]

transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。

1、变化的属性:transition-property

transition-property : none | all | [<IDENT>][‘,‘<IDENT>]* ;

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其中none没有属性改变;all所有属性都改变,它也是默认值;indent元素属性名,其对应的类型如下:

2、动画时间:transition-duration

transition-duration : <time> [,time]*;

transition-duration是动画执行的时间,单位为s(秒),比如0.1秒可以写成“0.1s”或者“.1s”,它可以作用于任何元素,包括:before和:after伪元素。

3、动画执行的方式:transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;

ease:逐渐慢下来;linear:匀速;ease-in:由慢到快;ease-out:由快到慢;ease-in-out:先慢到快再到慢。

4、动画延迟:transition-delay

transition-delay : <time> [,time]* ;

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition动画效果,取值同transition-duration。

二、实例动画

step1:改变字体颜色

<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>
h1 a{
	color:#03c;
	text-decoration:none;
	-webkit-transition:color .5s ease-in-out;
	-moz-transition:color .5s ease-in-out;
	-o-transition:color .5s ease-in-out;
	transition:color .5s ease-in-out;

}
h1 a:hover{
	color:#f60;
}

step2:改变背景颜色

<h2>专注于web前端开发</h2>
h2:hover{
	-webkit-transition:background-color 0.5s linear;
	-moz-transition:background-color 0.5s linear;
	-o-transition:background-color 0.5s linear;
	transition:background-color 0.5s linear;
	background-color:#ccc;
}

step3:转换多个属性

作用transition进行多个属性转换:

<div class="div">
	辛苦遭逢起一经,干戈寥落四周星。山河破碎风飘絮,
	身世浮沉雨打萍。惶恐滩头说惶恐,零丁洋里叹零丁。
	人生自古谁无死?留取丹心照汗青
</div>
.div {
	padding:5px;
	color:#fff;
	background-color:#666;
	-webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	-o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
}
.div:hover {
	color:#333;
	background-color:#ccc;
}

渐变效果还有另外一种写法:

.div {
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out;
}

第一种写法里面把各个属性都写了出来,而第二种里面用all代替,也就是变换所有属性。

demo:http://rainleaves.com/demo/transition/transition.html  前三个为transition动画实例,后四个为transform实例。

转载请注明本文链接:http://www.rainleaves.com/html/1534.html

时间: 2024-10-10 20:34:31

CSS3 transition 属性的相关文章

css学习笔记——CSS3 transition 属性

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3 transition 属性</title> <style> .box{ width:100px; height:100px; background:red; -web

CSS3:Transition属性详解

Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.".而我个人则简单地理解为"在某个时间段内,平滑地改变某个CSS属性.". Transition又包含了四个子属性,分别为property.duration.timing-function.d

css3——transition属性和opacity属性

[transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过渡效果需要花费的时间(以秒或毫秒计). 默认值是 0,意味着不会有效果. 该属性其实是transition属性的一个子属性,下面总结一下css3中的transition属性:[transition] 用于在一定的时间内平滑的过度,这种效果可以在鼠标单击,获取焦点,被点击或对元素任何改变中触发,并圆滑

css3 transition属性实现3d动画效果

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指

css3 transition属性变化与animation动画的相似性以及不同点

下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transition属性变化效果 第二个为animation动画效果 是不是已经看出他们之间的相同与不同了吧.对的,他们都可以实现简单的动画效果,但transition变化效果当鼠标离开动画结束时,它还是会持续一段时间的动画并最终返回为元素的初始样式.animation动画效果则不是,当鼠标离开后它会之间立刻结束动

数字滚动效果(CSS3 transition属性)

效果:初始化加载+定时刷新增加数值 相关代码: 容器: <h2>不循环样式</h2> <!-- 任意一个非行内元素就可以当做容器,绑定id 或 class ,必须设置容器的高度 height,因为每个数字的高度是由容器的高度决定所以容器的高度必须要设置的 --> <div class="scroll-number-0"></div> 引入js文件: <script type="text/javascript&q

CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速

transition:all 1s ease 1s ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-bezier 如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

CSS3 transition属性

Transition(过渡),设置过渡时间,(transition-duration) <head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200px;} </style> </head> &l

CSS3 transition 属性 过渡效果

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /*