html - 延迟返回位置 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 .