使⽤CSS3的“transition”属性控制长宽度的缓慢变化
transition用法搭配有时候我们可能会想要改变某个资源信息的长宽度，⽐如改变某个div的宽度，⽽且需要让这个宽度缓慢改变，⽽不是突然就改变了。这时候你可能会想到使⽤jquery的animate()函数，不过这个⽅法既得引⽤jquery，⼜得使⽤函数，有点太简单粗暴了，今天介绍⼀种更为⽅便⽽且优雅的⽅法，那就是使⽤CSS3的“transition”属性。
在上对“transition”属性有详细的解释，可以设置变化的时间，⽐如：
div{
transition:width 2s;
}
这是将变化时间设置为2秒结束。
这⾥还要说⼀下，当使⽤⽕狐浏览器进⾏调试时，还可以改变长宽度缓慢变化时的模式，⽐如先快后慢，或是两边快中间慢等等，如图的css：
如图是默认的曲线变化⽅式，还有下⾯的“Backward”是像跑步⼀样先后退⼀下再前进，到了终点多跑⼀点再退回来。⾥⾯这些都很有意思，可以⾃⼰试⼀试。
要注意，在“⽕狐浏览器”下调试前端可以看到这些尝试，但在“chrome浏览器”下看不到，但是如果加上的话效果也是管⽤的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。