W3C标准中对css3的transition这是样描述的:
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition主要包含四个属性值:
执行变换的属性:transition-property,
变换延续的时间:transition-duration,
在延续时间段,变换的速率变化transition-timing-function,
变换延迟时间transition-delay。
下面分别来看这四个属性值
一、transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时,则设置property值为background。
二、transition-duration:
transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值0,也就是变换时是即时的。
三、transition-timing-function:
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]区域内,否则无效。
四、transition-delay:
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),
简写:
“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition主要包含四个属性值:
执行变换的属性:transition-property,
变换延续的时间:transition-duration,
在延续时间段,变换的速率变化transition-timing-function,
变换延迟时间transition-delay。
下面分别来看这四个属性值
一、transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时,则设置property值为background。
二、transition-duration:
transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值0,也就是变换时是即时的。
三、transition-timing-function:
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]区域内,否则无效。
四、transition-delay:
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),
其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。
示例:
p {
transition-property: background-color,color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out 2s;
-webkit-transition-property: background-color,color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out 2s;
-moz-transition-property: background-color,color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in-out 2s;
}
简写:
p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}
下面是具体的例子,可以拷贝查看效果:
<!DOCTYPE html>
<html>
<head>
<title>CSS3</title>
<style type="text/css">
.hi{background:#ccc;
color:#FFF;
padding:10px 0;
width:300px;
text-align:center;
display:block;
}
.hi:hover{
background:#000;color:#f60;
-moz-transition: background-color 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background-color 0.5s ease-in,color 0.3s ease-out ;
-o-transition: background-color 0.5s ease-in,color 0.3s ease-out;
transition: background-color 0.5s ease-in,color 0.3s ease-out;
}
.trans {
display: inline-block;
padding: 1px 8px;
text-decoration:none;
background:#ccc;
color:#fff;
transition-property: background-color,color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out 2s;
-webkit-transition-property: background-color,color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out 2s;
-moz-transition-property: background-color,color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in-out 2s;
}
.trans:hover {
background-color: #ddd;
color:#f60;
}
h1 {
display:block; width:160px; line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none;
}
h1:hover {
background:#000; color:#f60;
text-shadow:2px 2px 10px #f00;
box-shadow:2px 2px 10px #000;
opacity:0.8;
width:260px;
-moz-transition:background 0.5s ease-in, color 0.4s ease-out, text-shadow 0.5s linear, box-shadow 0.6s linear , opacity 0.6s linear,width 2s linear; //多个属性的动画,可放HOVER也可以放在初始的地方
}
</style>
</head>
<body>
<h2 class="hi">你好CSS3 transition</h2>
<a href="#" class="trans">经过我,看看CSS3 transition的效果哦</a>
<h1>你好CSS3 transition 多个属性一起看</h1>
</body>
</html>