html怎么自动过度,CSS3-过度-transition

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

在CSS3里使用transition可以实现补间动画(过渡效果)，并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性 花费时间 运动曲线 多久以后开始;

属性

描述

CSS

transition

简写属性，用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 “ease”。

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒s 也可以是毫秒ms 他们之间的关系是 1s=1000ms

运动曲线 默认是ease

何时开始 默认是 0s 立马开始

案例源码:

Document

*{

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 200px;

background:skyblue;

/*transition: 需要过渡的CSS属性 过渡需要花费的时间 运动曲线 延时多久以后开始过渡*/

/*transition: CSS属性名 数值,单位s或者ms ease或者linear等 数值,单位s或者ms*/

/*1000ms = 1s*/

/*过渡某个属性名*/

/*transition: background 2s ease 0s;*/

/*过渡多个属性名*/

/*transition: background 2s ease 0s , width 5s ease 0s;*/

/*所有属性都需要过渡,可以设置all*/

/*transition: all 2s ease 0s;*/

/*需要过渡的属性没有默认值,也就是一定写 其他都有默认值,但是默认过渡时间是0s*/

/*transition: all;*/

/*推荐写法*/

/*transition: all 2s;*/

/*让某个属性过渡完再过去另一个属性*/

transition: background 2s ease 0s , width 2s ease 2s ,height 2s ease 4s;

/*transition: all 2s ,height 2s ease 4s;*/

}

div:hover{

background: red;

width: 400px;

height: 100px;

}