CSS Animation back to default

user_14370539 0
Viewed 59

If I have an element with default opacity: 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: 0.5, the 100% would be 0.5 automatically.

Is it possible?

css-animations css
1 Answers

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 class="box"></div>
<div class="box" style="opacity:0.8"></div>
<div class="box" style="opacity:0.5"></div>

user_86203330
Related