在2秒过渡到蓝色后立即过渡到红色

Question

这是我唯一能想到的。

＆＃13;

＆＃13;

#div {
  height: 20px;
  width: 20px;
  background-color: black;
  transition: 1s;
}

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

#div:hover {
  transition-delay: 2s;
  background-color: blue;
}

＆＃13;

<div id="div">

</div>

＆＃13;

＆＃13;

＆＃13;

它会忽略第一个#div:hover

编辑：

好吧，这似乎有效。

#div:hover {
    animation: fade 3s forwards;
}
@keyframes fade {
    0%, 66% {background-color: red}
    100% {background-color: blue}
}

但是如何让它反过来淡出？

Answer 1

第二个:hover覆盖第一个，转换延迟总是2秒。

我猜您需要为此创建一个动画：

＆＃13;

＆＃13;

#div {
  height: 20px;
  width: 20px;
  background-color: black;
}

#div:hover {
  animation: redtoblue 3s;
  animation-fill-mode: forwards;
}

@keyframes redtoblue{
  0%, 65.9%{
    background-color: red;
  }
  
  66%, 100%{
    background-color: blue;
  }
}

＆＃13;

<div id="div">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用animation来实现。

#div {
  height: 20px;
  width: 20px;
  background-color: black;
}

#div:hover {
  background-color: blue;
  animation: delayed 4s forwards;
}

@keyframes delayed {
  0% {
    background-color: red;
  }
  50% {
    background-color: red;
  }
  51% {
    background-color: blue;
  }
  100% {
    background-color: blue;
  }
}

<div id="div">

</div>