CSS动画恢复默认

Question

例如，如果我有一个默认值为 opacity: 0.8 的元素，并且我有一个通用的基本淡入动画 0% = opacity: 0, 100% = opacity: 1，我可以将 opacity: 1 的值设置为默认值吗？所以在这种情况下，100% 将是 opacity: 0.8，如果我在不同的元素上使用相同的动画，默认值为 opacity: 0.5，则 100% 将自动为 0.5。

可能吗？

Answer 1

只用opacity:0

定义动画

.box {
  background:red;
  display:inline-block;
  width:150px;
  height: 150px;
  animation:fade-in 2s 1s backwards;
}


@keyframes fade-in {
  from {opacity:0}
}

<div class="box"></div>
<div class="box" style="opacity:0.8"></div>
<div class="box" style="opacity:0.5"></div>

CSS动画恢复默认

CSS Animation back to default

css

css-animations