美文网首页前端笔记
CSS3新特性(02):Transition

CSS3新特性(02):Transition

作者: 荷小音 | 来源:发表于2016-07-24 11:55 被阅读98次

CSS3中动画涉及到三个属性,一个是Transform:变形;一个是Transition:过渡,一个是Animation:动画。其中Transform、Animation可以搭配着使用,实现复杂动画,Transition可以实现简单动画。本文来介绍下Transition:

W3C标准中的CSS3是这样描述Transition的,“CSS的transition允许CSS的属性值在一定时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
(1)语法

transition: property duration timing-function delay;

有时我们不只改变一个transition效果的属性,而是想改变两个或者多个css属性的transition效果,那么我们只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。

-moz-transition: background 0.5s ease-in,left 0.3s steps(3,start);
-webkit-transition: background 0.5s ease-in,left 0.3s steps(3,start);
-o-transition: background 0.5s ease-in,left 0.3s steps(3,start);
transition: background 0.5s ease-in,left 0.3s steps(3,start);

其中transition-property就是background、left,transition-duration就是0.5s,0.3s,也就是过渡效果花费的时间。ease-in、 steps(3,start)就是怎样过渡的曲线。

但需要值得注意的一点,如何有两个时间:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个值解析为transition-duration,第二个为transition-delay。

transition有下面这些属性:

属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的CSS属性的名称
transition-duration 定义过渡效果花费的时间,默认是0
transition-timing-function 规定过渡效果的时间曲线,默认是“ease”
transtion-delay 规定过渡效果何时开始,默认是0

transition-property具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果。
transition-duration是用来指定元素过渡转换过程的持续时间,取值:为数值,单位为s(秒)或ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

transition-delay是用来规定过渡效果何时开始,其取值:为数值,单位为s(秒)或者ms(毫秒),使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

transition-timing-function的值是允许你根据时间的推进去改变属性值的变换速率。比较难理解,所以单独拎出来说。

transition-timing-function属性值 描述
ease 中间快,两头慢
linear 匀速的
ease-in 开始的时候慢
ease-out 结束的时候慢
ease-in-out 中间快,两头慢,幅度比ease更大些
cubic-bezier 填四个值,自定义的贝塞尔曲线。所有值需在[0, 1]区域内,否则无效。
steps (步骤次数,[start/end])

其中像ease-in、ease等都可以用cubic-bezier自定义的贝塞尔曲线来写,所以cubic-bezier有必要弄清楚它的原理。

如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

transition: all .5s ease-in-out 1s;

来看下这张图的transition各个属性表示:

后记:这是原文地址《CSS3新特性(02):Transition》,欢迎来我个人博客逛逛!

相关文章

  • CSS3新特性(02):Transition

    CSS3中动画涉及到三个属性,一个是Transform:变形;一个是Transition:过渡,一个是Animat...

  • CSS3过渡动画、圆角、阴影、透明度

    答辩面试题 CSS3的新特性: 1、CSS3圆角、阴影、rgba 2、CSS3 transition动画 3、CS...

  • CSS - transition简介

    这篇博客意在用简短的几句话告诉你 CSS3特性 transition 的用法。 transition 有4个性质:...

  • css3 transition

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css...

  • CSS3动画

    一、CSS3 transform 属性 二、CSS3 transition 属性 transition 属性是一个...

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • Bootstrap组件 - 进度条

    知识点 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性...

  • 2019-06-04

    CSS3 transition动画: transition-property 设置过渡的属性 ;格式:width ...

  • 好程序员web前端培训技术之CSS3过渡

    好程序员web前端培训技术之CSS3过渡 transition css3的transition允许css的属性值在...

网友评论

    本文标题:CSS3新特性(02):Transition

    本文链接:https://www.haomeiwen.com/subject/qdowjttx.html