CSS3-过度-transition
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 多久以后开始;
所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒s 也可以是毫秒ms 他们之间的关系是 1s=1000ms
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
