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

【问题标题】：Set animation progress-percent by pure CSS通过纯 CSS 设置动画进度百分比
【发布时间】：2018-06-21 07:42:55
【问题描述】：

我想要像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>

【问题讨论】：

我没有投反对票，尽管我已经投票结束。我冒昧地猜测，否决票是因为您根本没有显示任何代码（链接到代码不算数，即使它托管在 SO 上），您还没有做出，或者显示，任何试图自己解决这个问题的尝试，你对你想要达到的结果只给出了一个相对模糊的描述（我不知道你是否想显示0%，@ 987654327@...100% 某处，或者如果您想以某种方式“上演”动画，如SKorulchuk's answer 或其他内容所示）。
问题是如何通过纯 CSS 设置 CSS 动画的进度百分比。这一切都在标题中。除了谷歌，这里没有什么可做的，（我有。我认为这是不言而喻的。）这里没有什么可以“尝试”的。如果有人不知道 CSS 动画是什么，他们也不会知道答案。

标签： html css animation

【解决方案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>

【讨论】：

谢谢。但我指的是 CSS animation。参见例如here。
我尝试使用 css 变量，但它会在 to 状态下创建闪烁并且无法修复动画：` .flex-buttons button:nth-child(5):hover ~ .imgs .progress{ --old-width: 80%; --宽度：100%； } @keyframes 进度幻灯片 { from { width: var(--old-width);最小宽度: var(--old-width); } to { 宽度：var(--width);最小宽度: var(--width); } }`

【解决方案2】：

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

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>

【讨论】：