C3 过渡
C3 过渡
在默认情况下，HTML 对 CSS 的应用都是即时的，在不同的样式之间切换会显得较为生硬。
C3提供的过渡效果，会让这个过程更加圆滑，呈现出逐渐变化的效果。
此场景经常与 :hover 一起使用
transition只是定义指定属性的变化行为并不会触发变化。触发过渡是其他因素引起的该属性样式变化 按照 transition 定义的过渡体现出来
语法：transition: 需要过渡的CSS属性 过渡时间 速率 开始时间
CSS属性：指定一个或多个所有属性都要过渡时，写all需要过渡的属性，逗号隔开
过渡时间：完成整个过程的时间（带单位 s/ms）
速率：过渡速率变化（默认 ease）
- ease：速度变慢
- linear：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速
开始时间：延迟过渡时间（带单位 s/ms），默认 0：无延迟
例子：设置div的宽和 背景颜色过渡效果（一般情况，只设置 属性和时间即可）
div{
width: 100px;
height: 100px;
background-color: #449fdb;
/*定义这两个属性的过渡行为，多个属性过渡用 逗号 隔开*/
transition: background-color 10s ease-in, width 10s linear;
}
div:hover{
/*触发上面的属性过渡*/
background-color: #990055;
width: 500px;
}
