使用 CSS3 过渡延迟鼠标悬停/悬停答案

【问题标题】：Delay mouseout/hover with CSS3 transitions使用 CSS3 过渡延迟鼠标悬停/悬停
【发布时间】：2012-03-12 16:22:25
【问题描述】：

我有一个在悬停时会改变大小的框。但是，我想延迟 mouseout 阶段，以便盒子在恢复旧尺寸之前保持新尺寸几秒钟。

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

在没有 Javascript 而只有 CSS3 的情况下可以做到这一点吗？我只需要关心支持 webkit。

【问题讨论】：

你试过css3动画属性吗？我已经尝试了一些动画属性的东西，但我不确定这是你想要的。但如果你愿意，我可以给你。

标签： css webkit css-transitions

【解决方案1】：

div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

这将立即触发 mouseover 状态，但等待 5 秒直到触发 mouseout。

Fiddle

【讨论】：

已编辑以添加非 webkit 前缀 - 这只是一个好习惯
在“div”标签定义中，指定“transition:”和“transition-delay”本质上不是重复的吗？转换规范的第一个值是延迟值，不是吗？
@Screenack 不，第一个值是过渡的持续时间 - 完成后需要多长时间。
转换的真棒使用，patad。

【解决方案2】：

转换可以声明为

transition: .5s all 5s

（简写，第一个数字是持续时间，第二个数字是延迟）那么你就不需要单独的转换延迟

抱歉，积分不足，无法添加评论

【讨论】：