CSS Animation back to default-CodePudding

If I have an element with default opacity of 0.8 for example, and I have a general basic fade-in animation (0% = opacity 0, 100% = opacity 1), can I set the value of opacity 1 to default? So in this case 100% would be opacity: 0.8, and if I use the same animation on a different element with default opacity of 0.5, the 100% would be 0.5 automatically.

Is it possible?

CodePudding user response：

Define the animation with only 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 ></div>
<div  style="opacity:0.8"></div>
<div  style="opacity:0.5"></div>