Question

我正在和某人讨论CSS3在点击和悬停时做动画的能力，我决定做一些测试来展示它们。我决定进行一些边界推动并使其成为当你在动画上盘旋时发生的，并且当你徘徊时它等待了3秒然后运行动画将它放回去。

然而问题是，当页面加载时，它会运行＆＃34; un-hover＆＃34;动画。

有什么想法绕过这个或其他方法更好吗？

以下代码的作用是当您将鼠标悬停在红色框上时，其动画为蓝色。当您取消悬停时，它会在3秒后再次恢复为红色。它们都计算为1秒的动画时间。

我知道这可以通过一个非常简单的JavaScript系统修复，但我只是想看看是否有CSS答案。

＆＃13;

@-webkit-keyframes makeblue {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}
@keyframes makeblue {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}
@-webkit-keyframes makered {
  0% {
    background: blue;
  }
  75% {
    background: blue;
  }
  100% {
    background: red;
  }
}
@keyframes makered {
  0% {
    background: blue;
  }
  75% {
    background: blue;
  }
  100% {
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: makered 4s;
  animation: makered 4s;
}
div:hover {
  -webkit-animation: makeblue 1s;
  animation: makeblue 1s;
  background: blue;
}

＆＃13;

<div></div>

＆＃13;

编辑1

有没有人知道这种类型的功能是否存在，或者甚至可能计划在未来使用？：

@keyframes makeblue {
   0% {
     background: [CurrentValue];
   }
   100% {
     background: blue;
   }
}

拥有此功能可以解决问题。如果这不存在，我认为应该:)。

Answer 1

如果您只处理背景或简单的css（不是关键帧动画），您可以使用转换延迟check it out at jsfiddle！：

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

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

编辑1

1 个答案: