css之transition动画

兼容

div{
width:100px;
height:50px;
backgroundcolor:black;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div：hover{
width:200px;
}

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

属性

transition: property duration timing-function delay;
默认为 transition : all 0 ease 0 ；

Property	Connotation
transition-property	设置效果的 CSS 属性的名称，如width
transition-duration	完成动作的时间，单位为 秒或毫秒
transition-timing-function	设置效果的速度曲线
transition-delay	延迟效果开始的时间

动作时间 （transition-duration） 必须设置，否则为 0

速度曲线transition-timing-function在w3school网中的参数详解(https://www.w3school.com.cn/cssref/pr_transition-timing-function.asp)
此处截图方便参考：

实现小图标翻转

.iconRoll {
        width: 40px;
        height: 40px;
        display: block;
        margin: 2px 0;
        background: url(iconRoll.png);
        position: relative;
        cursor: pointer;
 }

iconRoll:hover {
    background: url(iconRoll.png) 0px 40px;
    transition: all 0.2s 0s ease-out;
}