仅使用CSS的CSS3关键帧上的动画延迟？

我正在和某人讨论CSS3在点击和悬停时制作动画的能力，我决定做一个小测试来展示它们。我决定做一点边界推送，这样当你悬停在动画上时，它会发生，当你取消悬停时，它会等待3秒钟，然后运行动画把它放回去

然而，问题是当页面加载时，它会运行“取消悬停”动画

有什么办法可以绕过这个或其他更好的方法吗

下面的代码所做的是当您将鼠标悬停在红色框上时，它的动画是蓝色的。当您取消悬停时，将在3秒后再次将其设置为红色。它们都计算为1秒的动画时间

我知道用一行非常简单的JavaScript就可以解决这个问题，但我只想看看是否有CSS的答案

@-webkit关键帧makeblue{
0% {
背景：红色；
}
100% {
背景：蓝色；
}
}
@关键帧变成蓝色{
0% {
背景：红色；
}
100% {
背景：蓝色；
}
}
@-webkit关键帧已生成{
0% {
背景：蓝色；
}
75% {
背景：蓝色；
}
100% {
背景：红色；
}
}
@关键帧变为红色{
0% {
背景：蓝色；
}
75% {
背景：蓝色；
}
100% {
背景：红色；
}
}
div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
-webkit动画：makered4s；
动画：makered4s；
}
div:悬停{
-webkit动画：makeblue1s；
动画：makeblue1s；
背景：蓝色；
}

---

如果您只处理背景或简单css（而不是关键帧动画），则可以使用过渡延迟

---

动画延迟

？-我确实试过了，但这只是意味着它会立即变回红色，然后3秒钟后，我做了一个由蓝色变为红色的动画。如果你有办法让它工作，太好了：）@JamieBarker：据我所知，如果不使用JS，在加载时无法避免它。我创建了类似的东西：。这意味着您可以从主菜单中抽象出一个子菜单，并且仍然可以使用纯CSS访问它。仍然有同样的问题，但问题少了。现在没有js你就做不到。我不认为这会起作用，是吗如果这个例子可行的话，它实际上有一些实际的好处。背景色div实际上只是一个简短的示例：）+1对于“盒子外”的答案。好的，那么你看：我使用@keyframe间隙技术来获得这个功能。在你所附的上面的JSFIDLE中使用了相同的方法，我也使用了这种方法来开发这个站点：（几乎只有css动画）该FIDLE与我原来的一个完全相同，并且有相同的问题：同意。我们需要某种js来注册悬停状态或悬停状态。您仍然可以使用“动画播放状态：运行”进行播放，这应该是某种技巧。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition:background-color 0.25s 3s linear;
}

div:hover {
    background-color:blue;
    transition:background-color 0.25s linear;
}