西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > 开发教程 > HTML/CSS教程 >

CSS3之Transition(变换过渡)

时间:2016-01-16 14:12来源:未知 作者:好模板 点击:
Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下:

Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下:

transition: property duration timing-function delay;
/*
property:执行过渡的属性
duration:执行过渡的持续时间
timing-function:执行过渡的速率模式
delay:延时多久执行
*/

transition-property

可取值:

  • none
    没有属性会获得过渡效果。
  • all
    所有属性都将获得过渡效果。
  • property
    定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
div{
transition-property:width;
-moz-transition-property: width;/* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; 
/* Opera */}

transition-duration

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,回想一下如果只有transform属性,是不是变换啪地一下完成了。

div{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */}

transition-timing-function

既然是动画,那么就有动画的运行速率,不同的速度会产生不同的结果,以下是可取值。

  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)

速率示意图

transition-delay

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,也就是立即执行,如果在多个动画直接有先后顺序,那么它就会派上用场。

把它们写在一起

浏览器内核的前缀不能忘啊,使用emmet神器来帮助你。
emmet使用如图所示:

-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;

如图所示


将它们放在一起的效果如下,可以很明显的发现它们之间的不同。

(责任编辑:好模板)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容