使用CSS3的“transition”属性控制长宽度的缓慢变化

使⽤CSS3的“transition”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度，⽐如改变某个div的宽度，⽽且需要让这个宽度缓慢改变，⽽不是突然就改变了。

这时候你可能会想到使⽤jquery的animate()函数，不过这个⽅法既得引⽤jquery，⼜得使⽤函数，有点太简单粗暴了，今天介绍⼀种更为⽅便⽽且优雅的⽅法，那就是使⽤CSS3的“transition”属性。

在上对“transition”属性有详细的解释，可以设置变化的时间，⽐如：
div {
transition:width 2s;
}
在⽤js来改变元素的宽或⾼，就可以实现动态变化
这是将变化时间设置为2秒结束。

这⾥还要说⼀下，当使⽤⽕狐浏览器进⾏调试时，还可以改变长宽度缓慢变化时的模式，⽐如先快后慢，或是两边快中间慢等等，如图的css：
如图是默认的曲线变化⽅式，还有下⾯的“Backward”是像跑步⼀样先后退⼀下再前进，到了终点多跑⼀点再退回来。

⾥⾯这些都很有意思，可以⾃⼰试⼀试。

要注意，在“⽕狐浏览器”下调试前端可以看到这些尝试，但在“chrome浏览器”下看不到，但是如果加上的话效果也是管⽤的。