html - 悬停时改变三 Angular 形的颜色

Question

我想创建一个简单的关键帧动画。我创建了一个三 Angular 形。当您将鼠标悬停在其上时，三 Angular 形颜色会发生变化。最初三 Angular 形的颜色是红色，然后变成#9f1212，然后变成#2a60f4，最后变成黄色。完成动画后，三 Angular 形颜色变为红色。换色顺序:

red - #9f1212 - #2a60f4 - yellow - red

在黄色之后的上述顺序中，我想反向重复颜色顺序，即在黄色更改为 #2a60f4 之后更改为 #9f1212，最后它变成红色。

预期的输出顺序:

red - #9f1212 - #2a60f4 - yellow -#2a60f4 - #9f1212- red

代码:

.triangle-up {
	width: 0;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-bottom: 90px solid red;
}
.triangle-up:hover{
	border-bottom: 90px solid #fd7a7a;
    border-left: 55px solid transparent;
	border-right: 55px solid transparent;
      animation-name: example;
  animation-duration:4s;
}
@keyframes example {
 0% {
	border-bottom: 90px solid #9f1212;
  }
  50% {
	border-bottom: 90px solid #2a60f4;
  }
    100% {
	border-bottom: 90px solid yellow;
  }
}

<div class="triangle-up"></div>

如何获得预期的输出？任何帮助表示赞赏。

Answer 1

你快到了。添加这两个:

• > animation-duration值为 alternate 来循环动画
• > animation-iteration-count值为 infinite 无限期地重复动画

查看更新后的代码段:

.triangle-up {
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 90px solid red;
}
.triangle-up:hover{
    border-bottom: 90px solid #fd7a7a;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    animation-name: example;
    animation-duration:4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes example {
    0% {
        border-bottom: 90px solid #9f1212;
    }
    50% {
        border-bottom: 90px solid #2a60f4;
    }
    100% {
        border-bottom: 90px solid yellow;
    }
}

<div class="triangle-up"></div>