[CSS] transition

<u></u>transition用来指定元素的某个CSS属性值在一定时间内平滑的过渡。
这种效果可以在鼠标单击，获得焦点，被点击或对元素做任何改变中触发。

语法：

transition: property duration timing-function delay;

<u></u>transition-property：指定需要平滑过渡的CSS属性名
<u></u>transition-duration：效果持续的时间
<u></u>transition-time-function：效果的时间曲线
<u></u>transition-delay：效果开始时的延迟

注意：
（1）指定transition时，同时必须指定初始值

.test{
    position:absolute;
    transition:left 2s;
    /* 未指定left的初始值，transition无效，例如，应指定left:0; */
}
.test:hover{
    left:100px;
}

（2）用JS改变元素样式，是否触发transition有兼容性问题
在DOMContentLoaded事件前：Chrome46不触发，Firefox触发
<u></u>DOMContentLoaded事件中：Chrome46不触发，Firefox触发
<u></u>window.onload事件中：Chrome46触发，Firefox触发
<u></u>setTimeout中：Chrome46触发，Firefox触发

（3）IE9不支持transition

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容