延迟返回位置 CSS3 过渡

Question

有没有办法在 div 动画恢复到其原始状态时延迟 div 转换，但在它开始动画时却没有？

例如：

[ ] <- hover over this
[     ] <- immediately changes to this
[     ] <- stop hovering, stays like this for a second or two
[     ]
[     ]
[     ] <- then animates back to original state
[    ]
[   ]
[  ]
[ ]

Answer 1

是的。可以重新定义悬停状态下的动画。

selector {
    property: value1;
    transition: property 1s 1s linear; /* transition: property duration delay easingfunction; */
}
selector:hover {
    property: value1;
    transition: none; /* No animation */
}

不要忘记添加供应商前缀。更多信息：transitions & CSS3, auto vendor prefixer。