transition过度

transition过度属性

transition：用于设置DOM元素在不同状态之间切换的时候应用不同的过度效果，以前如果要想实现一个非生硬的状态切换需要写很多的js来实现，现在使用transition变可以轻松的实现。

1、transition-property：

property：表示属性的意思，这里用来设置元素要过度的css属性名。

基本语法：
transition: none | all | property;

• none：表示没有任何过度效果。
• all：初始值，表示所有的能过度属性都有过度效果。
• property：指定一个或多个属性名称执行过度效果，多个css属性名之间用逗号分隔开。

例如：

transition-property: width;
transition-property: window, height, background-color, opacity;
transition-property: all;

兼容性：

查看兼容性详情

查看案例Demo

能够支持过度的css属性查看1，查看2

2、transition-duration

transition-duration：表示过渡动画在多长时间内执行完毕。值以秒（s）或毫秒（ms）为单位不接受负值。可以指定多个值，每个值之间用逗号分开并且分别应用到 transition-property 指定的对应属性上。

基本语法：
transition-duration: time;

• time：指定动画执行时长。

例如：

transition-duration: 10s;
transition-duration: .5s, 10ms, .9ms, 0.5s, 10.05s; /*如果是小数点左边只有一个0的话，前边的 0可以省略。*/

兼容性：

查看兼容性详情

查看案例Demo

3、transition-timing-function

transition-timing-function：指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

基本语法：
transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | set-end | steps(<integer>[, <step-position>]?) | inherit

• ease：慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in：慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out：慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out：慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• linear：以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• steps(4, end)：四次运动到结束执行过度效果。
• cubic-bezier(x1, y1, x2, y2)：以贝塞尔函数算法执行过度效果。生成贝塞尔曲线网站：website1、website2、website
  

查看案例Demo

4、transition-delay

transition-delay：延迟指定时间后执行过度效果。值以秒（s）或毫秒（ms）为单位。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟用逗号分开，分别作用于你所指定的相符合的css属性transition-property;

基本语法：
transition: time | inherit | initial | unset

• time：指定的时间，格式：10s | 10ms | 0.5s (.5s) | -10ms | -5s (-.5s)
• inherit：

查看案例Demo

5、transition

transition：它是transition-property、transition-duration、transition-timin-function、transition-delay 的缩写形式，能够更方面的设置过渡效果，一般在开发中使用这种方式写过渡效果。

基本语法：
transition: property duration timing-function delay | none

• none：没有过渡效果。

基本写法：

/*两个值，属性名，过渡持续时间*/
transition: margin-right 4s;
/*三个值，属性名，过渡持续时间，延迟开始过渡时间*/
transition: margin-right 4s 1s;
/*三个值，属性名，过渡持续时间，过渡动画效果*/
transition: margin-right 4s ease-in-out;
/*四个值，属性名，过渡持续时间，过渡动画效果，延迟开始过渡时间*/
transition: margin-right 4s ease-in-out 1s;

/*可以同时写多个过渡属性，每个过渡之间用逗号分开*/
transition: margin-right 4s, color 1s;

/*也可以使用all表示全部属性*/
transition: all 0.5s ease-out;

transition: inherit;
transition: initial;
transition: unset;