Question

我想要类似the snippet here的东西，将鼠标悬停在一个元素（ A ）上会更改另一个元素（ B ）。此链接显示了如何进行。那不是问题。

但是，我要更改的是目标元素（ B ）上的动画的进度（“百分比”）。例如。如果用户将鼠标悬停在 A 上，则我希望 B 的进度更改为50％。

是否可以做到这一点，即仅使用CSS设置动画的进度？

如果没有通用方法，但keyframes可以采用某种方法。

编辑

如果我不清楚，我希望当用户将鼠标悬停在“ HERE”上时，我希望通过CSS方式将以下％设置为50。

@keyframes k {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.a {
  height: 100px;
  width: 100px;
  animation: k 10s infinite;
}

<div class="a"></div>
<div>HERE</div>

Answer 1

我想修改您的代码示例非常简单。

这是我在CodePen上的结果

.flex-buttons{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

.flex-buttons button{
  flex:1;
  cursor:pointer;  
}

.progress {
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.1, 0.2, 0.7, 1);  
  min-height: 100%;
  min-width: 0%;
  width: 0%;
  background-color: #3e2a1a4f;
}

.flex-buttons button:nth-child(1):hover ~ .imgs .progress{
  min-width: 20%;
  width: 20%;
}

.flex-buttons button:nth-child(2):hover ~ .imgs .progress{
  min-width: 40%;
  width: 40%;
}

.flex-buttons button:nth-child(3):hover ~ .imgs .progress{
  min-width: 60%;
  width: 60%;
}

.flex-buttons button:nth-child(4):hover ~ .imgs .progress{
  min-width: 80%;
  width: 80%;
}

.flex-buttons button:nth-child(5):hover ~ .imgs .progress{
  min-width: 100%;
  width: 100%;
}

.imgs{
  order:-1;
  flex-basis:100%;
  height:100px;
  border:2px solid grey;
  position: repative;
}

<div class="flex-buttons">
    <button> Image 1 </button>
    <button> Image 2 </button>
    <button> Image 3 </button>
    <button> Image 4 </button>
    <button> Image 5 </button>
    <div class="imgs"><div class="progress"></div></div>
  </div>

Answer 2

您不能设置特定的动画关键帧，但可以依靠:hover状态来禁用动画并自行设置值。注释应解释该技术，但它主要依赖于并要求：

CSS Custom Properties用于颜色之间的计算，特别是色调。
Flex Layout，以允许:hover事件影响动画。
hsl()，因为我们要计算两种颜色之间的80％色相点。
calc()进行计算。

您提供的示例似乎含糊不清，并且可能没有捕获您所需的实际用例，但是可以将这些技术重新用于处理几乎所有的过渡效果。我强烈建议您的下一个SO问题包括您正在实际处理的示例。

/* animation from start hue to end */

@keyframes k {
  0% {
    background-color: hsl(var(--hue-start), 100%, 50%);
  }
  100% {
    background-color: hsl(var(--hue-end), 100%, 50%);
  }
}

.a {
  height: 100px;
  width: 100px;
  animation: k 10s infinite;
}


/* set css props to use to calculate 80% point */

.progress {
  /* shortest hue turns between red and blue */
  /* 360deg, 240deg would work too */
  --hue-start: 0deg;
  --hue-end: -120deg;
  --hue-diff: calc(var(--hue-end) - var(--hue-start));
}


/* In order to hook onto `HERE`'s `:hover`, we need it structurally before the animation */
.progress {
  display: flex;
  flex-direction: column;
}

.trigger {
  order: 2;
}

.a {
  order: 1;
}

.trigger:hover+.a {
  /* hard set background to 80% of the hue difference */
  animation: none;
  background-color: hsl(calc(var(--hue-start) + var(--hue-diff) * .8), 100%, 50%)
}

<div class="progress">
  <div class="trigger">HERE</div>
  <div class="a"></div>
</div>

通过纯CSS设置动画进度百分比

2 个答案: