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>