CSS3过渡模块,transition规范的实际使用经验

CSS3 transition标准的实在应用经历

2014/01/16 · CSS · CSS, CSS3

原稿出处: Rodney Rehm   译文出处:腾讯ISUX   

本篇小说主要陈述CSS3 transition标准和在差别浏览器之间的应用差别,关于切实化解方式或怎么着躲过难题的观点能够参照另生机勃勃篇拾贰分有观念的稿子,“All You Need to Know About CSS Transitions”。亚历克斯MacCaw呈报的是关于贯彻特定的功力,而笔者要谈的是才能背景,重要商讨在应用CSS过渡的进度中所未预料到的难点。

组织(HTML),表现(CSS),以致作为(JavaScript)相分离并非何许异样的作业,然而CSS 能超出这么些界限何况能够在长时间内得到实际的使用,那还当真是一个全然两样的商议话题。

几周前,作者付出三个 JavaScript 模块,在能力所能达到利用 CSS 过渡的标准下,JavaScript 端又不或者取获得贯彻联网的方法。实际遭受的主题材料是这两侧根本未有章程同步,经过接二连三的测验后,笔者只得扬弃。而自个儿的测量试验结果正是本文所陈说的。

率先,大家要说一下getcomputedstyle(),是豆蔻年华种用 JavaScript 重返浏览器渲染CSS的属性值的章程。 这些办法能够查阅“DOM Level 2: getComputedStyle()”和“CSS Level 2: Computed Values”。

那对于像 font-size 那样的属性, 通过一个参数便得以调换为像素值。 但对于能够缩写的属性值,举个例子 margin ,一些浏览器则赶回为空。再不怕那多少个同黄金年代属性的例外属性值,比方 font-weight 的值 bold 和700。WebKit也会有三个小bug,它会从伪对象中领到出属性值。

那边所描述的浏览器之间的差异是二〇一二年二月在选取 Firefox18(Gecko卡塔 尔(阿拉伯语:قطر‎,Opera 12.12 (Presto卡塔尔, Internet Explorer10(Trident卡塔尔,Safari 浏览器6.0.2(WebKit卡塔 尔(阿拉伯语:قطر‎,Chrome 23(WebKit卡塔尔国 以至 Gecko 和 WebKit的 Nightly build channels。

热切,让大家来一起看一下标准与事实上情形的异样,为了便于,小编差十分的少了各浏览器的前缀。在文中本人通过创办三个 CSS3 Transitions Test Suite 来开采题目。

1、内定过渡
CSS3 transitions 标准定义了以下三个 CSS 属性:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

连通性质
transition-property 是用来钦定当成分个中多本性质改造时奉行 transition 效果。系统默许值是 all,那表示浏览器能够以动漫片方式表现全部的可过渡属性(transition-duration持续时间超过0s卡塔 尔(英语:State of Qatar),该属性帮忙单个值或以逗号隔开分离的五个值列表(跟别的全部transition-*属性同样卡塔尔。

正式规定,三个浏览器应该选取并保留任何它不可能识其他属性。由此,下边包车型客车例证司令员会看见持续2秒的 padding 过渡:

CSS

transition-property:foobar,padding; transition-duration:1s,2s;

1
2
transition-property:foobar,padding;
transition-duration:1s,2s;

分化于标准的是,上边的图景在 WebKit 下会深入分析为 transition-property: all。 而 Firefox 和 Opera 会深入分析为 transition-property: all, padding.

连着持续时间
transition-duration 属性规定了叁个连通从开始状态到对象状态的持续时间。它承担以秒或阿秒的值(举例,2.3S和2300ms都以指2.3秒卡塔尔国。
固然规范明确规定了过渡值必需为正数,但 Opera 仍选拔-5S的值,最少对于getComputedStyle(卡塔尔来讲是那般的。固然正规中并未节制属性值的大小,但 Opera 和 IE 不选用低于10ms的值。而 WebKit 在 getComputedStyle(卡塔尔国实践中有个小bug,比如:重临值0.009999999776482582s会代替0.01s。

连接延迟时间
transition-delay 属性规定了在执行三个接入早先的等候时间,相像应用值。Delay 能够是负值,但这会招致动漫不恐怕平滑过渡。
IE 和 Opera 不收受 transition-duration 在-10ms和10ms之间的值。Web基特 的 floating point 也会在这里儿现身。

transition-timing-function 属性规定了交接效果的时日曲线。包蕴cubic-bezier(x1, y1, x2, y2卡塔 尔(阿拉伯语:قطر‎, step(, start|end卡塔尔国,和事先定义的 cubic-bezier 曲线关键词,linear, ease, ease-in, ease-out和ease-in-out。在利用 LEA Verou 特有的 cubic-bezier 曲线编辑器时,cubic-bezier 背后的公式就变得不再主要。就算 cubic-bezier 曲线会平滑过渡,但是step()函数会在一个定点的区间跳到下八个值。那样便会发出逐帧动漫的功能;如“Pure CSS3 Typing Animation With steps()”。

linear 的总结值经常表示为 cubic-bezier(0, 0, 1, 1卡塔 尔(阿拉伯语:قطر‎—— WebKit除了那些之外。但 WebKit 依然会回到 cubic-bezier(0.25, 0.1, 0.25, 1卡塔尔,而不是ease。标准规定 X 值的必得介于0和1之间,y 值能够超越该约束,而Web基特 允许 X 超过此限定,而 Android 浏览器(4.0版本卡塔尔国却混淆了x和y的界定。

2 过渡完成
本人这段日子已经涉及了 CSS 过渡异步运维的主题素材。标准说到了 TransitionEnd 事件允许 JavaScript 与已做到的连结同步进行。但可恶的是该规范对此并没实际演说。事实上,它只是简短地表明单个事件会因为已成功对接的习性而被截止。

标准提出缩写属性(如padding卡塔 尔(阿拉伯语:قطر‎应该为包含其在内的富有属性(padding-top,padding-right,等等卡塔 尔(英语:State of Qatar)完结联网,它并不曾说哪些属性应该在 TransitionEnd 事件中被实际命名。但是纵然过渡被定义为缩写属性(如padding卡塔 尔(阿拉伯语:قطر‎,Gecko,Trident 和 Presto 对于普通书写的子属性(如padding-top卡塔 尔(阿拉伯语:قطر‎同样能够达成对接,而 WebKit 则会堵住过渡。 假设你内定 transition-property: padding,WebKit会为 padding 实践过渡, 但 transition-property: all 那样就能针对 padding-left 实行新的交接。而当 padding 正试行过渡时, Nokia 6.0.1 的 Safari 浏览器在也能够试行 font-size 和 line-height的对接。

CSS

.example{padding:1px;transition-property:padding;transition-duration:1s;} .example:hover{padding:10px;}

1
2
.example{padding:1px;transition-property:padding;transition-duration:1s;}
.example:hover{padding:10px;}

如上 CSS 就要不一样浏览器下触发不一样的 TransitionEnd:
Gecko,Trident,Presto:
padding-top,padding-right,padding-bottom,padding-left
WebKit:
padding

CSS

.example {padding: 1px;transition-property: all, padding;transition-duration:1s;} .example:hover{padding:10px;}

1
2
.example {padding: 1px;transition-property: all, padding;transition-duration:1s;}
.example:hover{padding:10px;}

如上 CSS 将要差异浏览器下触发不相同的TransitionEnd:
Gecko,Trident,Presto,WebKit:
padding-top,padding-right,padding-bottom,padding-left
Safari 6.0.1 on iPhone:
padding-top, padding-right, padding-bottom, padding-left, font-size, line-height

您能够钦定负值 transition-delay 来“连忙达成”转变。但是transition-duration: 1s; transition-delay: -1s; 在 Gecko 和 WebKit 下试行转变并会马上跳转至指标值。而Trident 和 Presto 将不会触发任何事件。

WebKit在 getComputedStyle() 上越过的浮点难题也同样存在于 TransitionEnd.elapsedTime 中,全部的浏览器如此。 Math.round(event.elapsedTime * 1000) / 1000 可支持修复。

WebKit 和 IE 浏览器下施行 background-position,会接触对 background-position-x 和 background-position-y 的 TransitionEnd,而不是background-position 的TransitionEnd。

之所以,尽管你精通过渡正在进行,你也不可能正视原来就有个别TransitionEnd.propertyName。就算你能够编写制定大量的 JavaScript 来弥补,但在未有对每壹特性情举办适宜品质检验的情况下,纵然你利用最新方法也将不可能达成。

3 过渡性质
正式列出了浏览器支持动漫过渡的有些CSS属性。当然也包括CSS2.1的属性。还应该有一点点方可动态变化的新属性,如 Flexible Box Layout。

该属性数值类型非常关键。margin-top 接受和值,但根据可连接CSS属性列表,唯有是可完成动漫效果。但那并不可能让浏览器开采商避开值完成联网。不过,word-spacing 属性除了那一个之外。该属性富含值,但不曾浏览器能以卡通格局呈现。

放弃 TransitionEnd 事件,假设在联网爆发的指准时间内,getComputedStyle(卡塔尔值从A变到B,该属性就能够从值A过渡为值B。若无推行,例如“CSS属性值发生变化”,那么也许应该精心甄别下DOM。setTimeout()的深入深入分析度还相当不够好以达到急忙连接(小于几百纳秒的持续时间卡塔尔国,那时候requestAnimationFrame()不畏您的副手。在重绘前会提醒你,并提供了有个别中档值供参照他事他说加以侦察。除了opera,其余的都足以协助。

4 过渡性质的预先级
transition-property 标准允许数十次连通单个属性,借使单个属性在“过渡性质”中的值被每每钦点,过渡将透过持续时间,延迟和时间曲线给出的值来贯彻。由此,大家得以兑现 padding 过渡持续1秒,padding-left 过渡持续2秒; 或选取transition-property: all 来定义私下认可属性类型一视同仁置特定属性。
在 Firefox 和 IE 浏览器上,那个都未曾此外难点。 但 opera下会搅乱优先顺序。它以为 padding-left 比padding 和 all 尤其具体,实际不是简轻易单地应用最终三个属性。

最大的难题是WebKit。要是几本性能被频频点名,它将实行数次接入。 假使想让WebKit崩溃,尝试用transition-duration :0.1秒运转transition-property: padding, padding-left,Web基特将起码施行一回对接。但更加风趣的是,TransitionEnd能够举办过多次的十足过渡。

5 auto的转变
CSS 属性中的 auto 值能够自适应宽度,借使块级元素设置了width: auto,那么就能持续父级的幅度。一时你需求从 width: auto 校订到三个现实上升的幅度,並且必要连接这一个退换。当然本标准并未强制或否定 auto 值可用于过渡。

Firefox,IE 和 Opera 不能够从 or 值过渡到 auto 值。 IE 下有 z-index 有一小点不等,但如此而已。 另一面,WebKit 能够从and 过渡到差非常少能够接纳auto 值的跋扈CSS 属性。WebKit 不太喜欢 clip;因为那本特性,它只会抓住 TransitionEnd 过渡,而连贯时期不会发出或显示别的中间值或状态。
对于任何属性,如 width 和 height,WebKit 下会有部分数差距。即便 width: auto 过渡为 300px 的上涨的幅度,然后再连接成 100px,那么过渡不会从 300 缩至100 像素。它会从 0 增到 100 像素。

至于全部的宽容性列表,能够查阅“CSS Animatable Properties.”

6 隐式过渡
隐式过渡产生在当三个天性的更动引起另叁个属性被接入的时候, 大概当您想改正二个父级成分中的属性, 会引致子成分无论是持续过渡或附属属性的衔接。font-size: 18px, padding: 2em—–padding 会被计算为 2 × font-size, em 就是36像素。

有各个各个的相对值类型:, , em, rem, vh, vw等等。使用一个相对值,如 padding: 2em,让浏览重视新计算属性的 getComputedValue(),每便应变量(如font-size卡塔尔都会时有发生改造。由于总括样式改动,将扭曲引致padding 的连结。这种连接被定义为“隐式过渡”,因为padding属性值未有被涂改。

抢先八分之四浏览器会实现这种隐式过渡。除了 IE 10,只对 line-height 属性施行隐式过渡。除了 vertical-align 外,Webkit 能够针对其余具备属性施行隐式过渡。除了字体相对属性值,还恐怕有大幅相对属性值(常常为卡塔尔国,相对属性值(如vh和vw卡塔尔,私下认可初阶值(Opera中的column-gap: 1em卡塔 尔(英语:State of Qatar),还会有“currentColor”。全体这几个都有十分大希望会,也也许不会引起隐式过渡。

在 Firefox 中, 当世襲和从属属性实施过渡,但她们的 transition-duration 或 transition-delay 并不曾乘势过渡, 这么些隐式过渡就能变得极度风趣。 而 Webkit 和 Opera 实施过渡时会很有视觉感,但 Firefox 会稍显混乱。在IE中不会自由实践隐式过渡。

除此以外,别忘了世襲, DOM 成分的 font-size 将会由其子成分世袭,只要不被覆盖,就大概引起隐式过渡。

7 转变和伪成分
伪成分(:before和:after卡塔尔,在 CSS2 中早就有了介绍. 如若不了解能够查看 “Learning to Use the :before and :after Pseudo-Elements in CSS”。 纵然 CSS3 中定义了额外的伪成分(::alternate,::outside卡塔 尔(英语:State of Qatar),可是她们(到最近截止卡塔 尔(英语:State of Qatar)还并从未被援救。因而全体CSS 动漫属性也应该是伪成分的动漫片属性。

Firefox 和 IE 10 可以在伪成分上贯彻属性过渡. 而 Opera,Chrome 和 Safari 则不会。 WebKit 从二〇一三年良月起也最先辅助。

伪成分的衔接会引致内容本身发生局地新主题材料,因为在更改内容时 TransitionEnd 过渡根本还平素不停止。 在某一时间段内,他们应当在主成分上被触发,并经过 TransitionEnd.pseudoElement 提供伪元素,但即便是“CSS动漫过渡”的“过渡事件”部分,编写者的方案也并不曾点名哪二个最合适。

作者们想要退换 content 属性值,因而IE 8就要极度景况下(比方:hover状态卡塔尔将会再也渲染该因素。结果申明,对老的IE版本进行兼容会潜濡默化到独具其余浏览器的频率。所以, 当试图在伪成分上进展质量过渡时,要保管 content 的值不会被改成。

要是主元素未有运维:hover状态,那么 IE 10 将不照准伪成分“:hover”实施过渡。

CSS

.some-selector:before{content:"hello";color:red;transition:all 1s linear 0s;} .some-selector:hover:before{color:green;}

1
2
.some-selector:before{content:"hello";color:red;transition:all 1s linear 0s;}
.some-selector:hover:before{color:green;}

在 IE10 下,:before在 mouseover 的时候,:hover 是千真万确要定义的。

本条主题素材在于不是应当需要您定义主成分:hover 状态。而是只要未有定义,IE 10 会将:hover解释为:active。更离奇的是,:active状态竟然会在 mouseup 后接二连三持续,而当你重新点击就能够打消。

8 背景标签
在编写制定标签时,IE 10 是有一无二可对背景或前途响应的浏览器,假设标签变为背景后,即便它会做到正在推行的过渡,但它不会进行新的连结。IE 10 将等到标签变为前程后再实践新过渡。幸运的是,IE 10 已经帮忙页面包车型大巴可以预知性 API,允许开拓职员应对这种操作行为。

9 隐蔽成分
对此隐讳的因素,过渡是不会被实践的,因为大多数浏览器都显然感觉未有要求在四个看不见的要素里运转过渡。不过,也可能有特例,在 Opera 下无论元素掩瞒与否它都将举行过渡。

10 过渡之前,DOM树是还是不是加载实现
当文书档案脱离拆解解析形式时,DOMContentLoaded 被触发,借使您在利用 jquery,那么应该领会jQuery.ready(),过渡能够在这里前面运营。

11 渲染差距
其生机勃勃主题材料本身以前曾经说过了, 本文正是基于自己的测量检验结果进行演说的。测量检验是活动运转的,但事实申明,照旧察觉了累累主题材料。
立时要促成从渐变到渐变的背景过渡是不恐怕的,但能够完毕从渐变到纯色的联网。假设渐变正在张开中,从深褐到目标颜色的连接将在发轫,在交接运营时,会看出碳黑在快捷眨眼。最近具备的浏览器中都能够发掘到这点。

但是Firefox 如同是用分化的算法来渲染图像的,以申明它们实行了动漫片过渡(见实例卡塔 尔(阿拉伯语:قطر‎。很鲜明,在动漫过渡时, Gecko 并不曾显现好的职能。假设 transform: scale() 丰盛低,这种气象将时有爆发。

Firefox 不会从 a:visited 到 a:hover 进度中连着动画,反之亦然。 但它会从 a:visited 直接跳到 a:link,然后对接到 a:hover 状态, 你能够在这里个例子中看到,这是在 Mozilla Developer Network”Privacy and the :visited Selector”中关系的。然而IE 10 与 Chrome,Safari 和 Opera 浏览器一样,会从a:link到a:visited完结连接。
万一子成分的 position 更动时, Firefox 不会触发成分的属性, 而 WebKit,Opera 和 IE 10 则会接触。

12 对行业内部的提出
看完了整个标准并对具备机能扩充了测验之后,认为要是能开展以下优化将会更加好:

  • 出席TransitionsEnd(注意是复数卡塔 尔(阿拉伯语:قطر‎,叁个要素的兼具连接生龙活虎旦形成就开动触及。它能告诉生龙活虎多元已被触发的性质,但是没有必要知道怎么样已被接通, 只要理解全数的卡通过渡哪一天能够形成就能够。
  • 加盟 TransitionStart 职分,以便能够获取每种待过渡性质。因为 JavaScript 的风波循环和渲染路径不料定能互相制约,单生机勃勃的 TransitionsStart(也会重复数十次卡塔尔或然是越来越好的缓和方案。笔者不理解为何要 cancel 职责,所以这就叫“操作后就不再管”。
  • 要鲜明如何 TransitionEnd 要求被触发,前边举个例子的 WebKit 中 padding 和 padding-left 的主题素材会令人很胃疼。
  • 要显然表明“隐形过渡”如什么地方理, 后边例子中 transition-property: font-size的line-height: 1em 应该要有鲜明的管理格局。
  • 急需丰盛那多少个允许定义 pointer-events: none 并防止意外悬停状态的::transitioning伪类,这里幸免滥用样式,因为她俩本人会引发新的接入或许改动正在拓宽的连片。除了那几个提议,大家还须要能在非常少量施用 JavaScript 进行援助的情事下进展一些好端端操作。
  • 偶然你要求禁止使用过渡。举例,为了在网址访谈者眼前表现全面衔接在此之前,你须求调解布局并对尺寸规格进行标准总结对职分实行周详布局。
  • 有的时候你想立即从 DOM 中移除二个对象。你能够加多贰个类,等待 TransitionEnd 实现后再展开删除。
  • 跟删除对象同样,你想要增多三个新因素。你可插入那些成分,设置“掩盖”以达成新因素的体制变化。
  • 再也排序,隐藏和展现成分都相比较宽泛。针对那么些进展体制操作就要像操作实用程序相像,如 Isotope。

13 使用delay
使用延时,能够很好的解决无意的鼠标悬停变成的样式变化,就好像setTimeout()。

14 计算(可参照后面谈起过的实例)

  • 行使 transition-property: all 时在意,不然将越过本不供给张开更动的 TransitionEnd 境况。
  • 当使用可缩写属性时,触发事件的数量会凭借分化浏览器而分歧。
  • Opera 和 IE 不扶植延迟时间为负值。
  • Webkit在质量优先级上存在难点,举例:要幸免transition-property: margin, margin-left的状态。
  • IE不协助隐式转换。
  • Firefox和Opera不可能拆解深入分析 transition-property: all, width。
  • Opera 混淆了品质的预先级。
  • 伪成分的接入不会潜移暗化 TransitionEnd。
  • 伪成分的连通在 IE 10 下会冒出:hover的bug。

    赞 收藏 评论

图片 1

CSS3连缀模块

[有的图片和文字来源:]http://www.css88.com/archives/4705

1、什么是CSS3过渡?

CSS3 过渡(transition卡塔 尔(英语:State of Qatar)是通过定义成分从 起源的情状 和 截止点的状态 ,在鲜明的小时间隔内达成要素平滑地衔接或变化 的黄金年代种补间动漫机制。你能够让属性的变动进度持续生机勃勃段时间,并不是随时生效。

透过transition你能够调节哪些属性发生动画效果 (能够经过分明地列出那一个属性),几时初阶动漫 (通过安装delay), 动漫持续多长期(通过设置duration), 以至哪些动画(通过定义timing函数,比方线性地或开始快结尾慢)。

2、过渡的三要素

1、必需有有些成分的属性暴发变动
2、规定您愿意把效果与利益增加到哪个 CSS 属性上
3、规定职能的时间长度

3、CSS3连贯有何属性?

属性 描述
transition 简写格式。用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的css属性名称。
transition-duration 规定过渡要花费的时间,默认是0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡从何时开始。默认是0。

3.1 transition-property(过渡性质卡塔尔

语法
transition-property: none|all|property;

图片 2

image.png

  • 指定为 none时,没有质量会获得过渡效果,已经实行的连通效果也会即刻终止。
  • 暗中同意值为all,成分任何可连接(transition卡塔 尔(阿拉伯语:قطر‎属性值变化时都将施行过渡(transition卡塔尔效果。
  • 能够独立内定成分哪些属性别变化更时试行过渡(transition卡塔尔国,能够触发浏览器reflow或repaint的属性那三个CSS属性能够使用动漫,可参见:https://developer.mozilla.org/zh-CN/docs/CSS/CSS_animated_properties这里列出装有的CSS属性,假若能够做动漫,那么会申明是怎么着设置。

3.2 transition-duration(过渡持续时间卡塔尔国

1.用来钦定过渡的持续时间。时间值如:1s(秒卡塔尔,800ms(微秒)。
2.默许值是0s。也得以知道为未有连通(transition卡塔尔国效果。

语法

transition-duration: time;

图片 3

image.png

3.3 transition-timing-function(过渡时间函数卡塔尔

语法:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

内定CSS属性的转换速率,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),私下认可值时ease:

1.ease:(慢慢变慢卡塔尔国暗中同意值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2.linear:(匀速卡塔 尔(阿拉伯语:قطر‎,等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3.ease-in:(加速),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4.ease-out:(减速卡塔尔,等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5.ease-in-out:(加速然后减速卡塔尔,等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6.cubic-bezier为通过贝塞尔曲线来测算“调换”进度中的属性值,如下曲线所示,通过改造P1(x1, y1)和P2(x2, y2)的坐标能够更改总体经过的Output Percentage。w3c文书档案中发挥是颇有值需在[0, 1]区域内,不然无效。但是在有个别浏览器(Chrome,Firefox,Opera,IE11 预览版卡塔尔国下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并未那几个范围,曲线能够是负值,也得以取大于1的值。固然x1和x2是负数,只怕抢先1的值那么直接使用最后样式未有连接效果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内,不然直接利用最后样式,譬如Opera 12,和老版本的webkit浏览器,其余没测验。能够看看下边demo中的最终二个案例-Awesome!

查看demo:不同的timing functions demo http://css88.com/demo/css3_transition/

推荐多少个简易直观的cubic-bezier() 贝塞尔曲线设置工具:

http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/

http://cubic-bezier.com/
注:关于step-start,step-end,steps(<integer>[, [ start | end ] ]?)取值这里不做表达,我们能够看看
http://www.w3.org/TR/css3-transitions/#transition-timing-function-property

http://www.css88.com/archives/5403/https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

3.4 transition-delay(过渡延迟函数卡塔尔

点名叁个动漫开头执行的年华,即当改换成分属性值后多久开首施行“转变职能”,开端默许值为0;

图片 4

image.png

4、 transition的简写

语法
transition: property duration timing-function delay;

图片 5

image.png

别的景况:当属性值列表长度不平等时

以 transition-property 的值列表长度为标准,要是有些属性值列表长度短于它的,则另行值以长度风流倜傥致, 譬如:

css 代码:
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

将按上面那样管理:

css 代码:
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

好像地,假设某些属性的值列表专长 transition-property 的,将被截短。 比方:

css 代码:
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

将按下边那样管理:

css 代码:
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

5、怎么样施行过渡效果

css3连缀动漫日常通过鼠标事件照旧鼠标状态定义动漫,平常大家得以用CSS中伪类动用js更改成分的样式属性扩大删除样式来实行定义的卡通片。CSS中伪类推行动漫包蕴:

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中

本文由星彩网app下载发布于前端技术,转载请注明出处:CSS3过渡模块,transition规范的实际使用经验

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。