Question

我试图推迟动画

这是我的css：

div {
    background-color: #000; 
    height: 100px;
    transition-delay: 5s;
    transition: background-color 1s ease;
}

div:hover {
    background-color: #fff;
}

当我将鼠标悬停在div上时，动画立即启动，没有延迟。当我检查元素时，我发现有一个css属性transition-delay有任何建议为什么这不起作用？（我使用的是铬）

DEMO

Answer 1

您需要在transition-delay之后声明transition。

div {
    background-color: #000; 
    height: 100px;
    transition: background-color 1s ease;
    transition-delay: 5s;
}

或者在一个声明中声明：

transition: background-color 1s ease 5s;

http://jsfiddle.net/n7Ne9/5/

Answer 2

您可以在这里找到一个有效的例子：http://jsfiddle.net/n7Ne9/4/

transition-property:background-color;
transition-duration:1s;
transition-delay:2s;

了解更多here

Answer 3

执行的方式是以相反的方式进行转换，即何时解除转换发生的div。尝试相反的方式：

div {
    background-color: #000; 
    height: 100px;

}

div:hover {
    background-color: #fff;
    transition-delay: 5s;
    transition: background-color 1s ease;
}

css转换延迟不适用于背景色

3 个答案: