定时显示（仅CSS）-我们可以将持续时间作为HTML的一部分传递吗？

Question

我具有以下CSS类和实现定时显示的HTML代码：

.timedSuccessBox {
  color: white;
  background: #27ae60;
  border-radius: 5px;
  padding: 5px;
  -moz-animation: inAndOut 5s ease-in forwards;
  -webkit-animation: inAndOut 5s ease-in forwards;
  animation: inAndOut 5s ease-in forwards;
}

@keyframes inAndOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class='timedSuccessBox'>That worked!</div>

是否可以仅继续使用CSS（不使用JS）并传递动画的持续时间（目前已硬编码为5）？

理想情况是，如果调用的HTML代码超过了持续时间，则将使用该持续时间，否则回退到5s。

谢谢。

Answer 1

我认为您可以在html中使用它：

<div class='timedSuccessBox' style='animation-duration: 10s!important'>That worked!</div>

Answer 2

您可以覆盖默认情况下设置为5s的自定义属性

:root {
  --duration: 5s;
}

.timedSuccessBox {
  color: white;
  background: #27ae60;
  border-radius: 5px;
  padding: 5px;
  -moz-animation: inAndOut var(--duration) ease-in forwards;
  -webkit-animation: inAndOut var(--duration) ease-in forwards;
  animation: inAndOut var(--duration) ease-in forwards;
}

@keyframes inAndOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class='timedSuccessBox' style='--duration: 10s'>That worked!</div>