使用CSS3转换延迟鼠标移出/悬停

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

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

div:hover {
    width:130px;
}

这是否可以不使用Javascript而只使用CSS3？我只需要关心支持webkit

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;
}

这将立即触发鼠标悬停状态，但请等待5秒，直到触发鼠标悬停

---

转换可以声明为

transition: .5s all 5s

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

---

很抱歉，无法添加为注释，因为我没有足够的分数

您是否尝试过css3动画属性？我已经尝试了一些关于动画属性的东西，但我不确定这是你想要的。但是如果你想的话，我可以给你。也可以添加非webkit前缀-这是一个很好的实践，在“div”标记定义中，指定“transition:”和“transition delay”本质上不是重复的吗？转换规范的第一个值是延迟值，否？@Screenack否，第一个值是转换的持续时间-一旦转换开始，需要多长时间才能完成。非常棒的转换使用，patad。