Question

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

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>

Answer 2

如果您希望动画是无缝的，并且不会跳到颜色上，只需延长动画持续时间，然后在动画中添加步骤即可。如果您希望动画循环播放，请添加animation-iteration-count: infinite;

JSFiddle

.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:10s;
}
@keyframes example {
  0% {
	border-bottom: 90px solid red;
  }
  16.66% {
	border-bottom: 90px solid #9f1212;
  }
  33.33% {
	border-bottom: 90px solid #2a60f4;
  }
  50% {
	border-bottom: 90px solid yellow;
  }
  66.66% {
  border-bottom: 90px solid #2a60f4;
	
  }
  83.33% {
	border-bottom: 90px solid #9f1212;
  }
  100% {
	border-bottom: 90px solid red;
  }
}

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

悬停时更改三角形的颜色

2 个答案: