how to keep an element in current state after animation is finished

provance 0
Viewed 14

starting position of the element is - outside of viewport
a css animation should start after 2sec
when finished - the element is inside the viewport - but how to keep it in the current state ?
in the example below abc should stay visible having top:54px

.abc{
  position:fixed;
  top:-100%;
  width:25px;
  height:54px;
  background:orange;
  animation-name:animaa;
  animation-delay:2s;
  animation-duration:2s;
}

@keyframes animaa{
  0% {top:-100%;}
  100% {top:54px;}
}
<div class='abc'></div>

animation css
1 Answers

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

Add animation-fill-mode: forwards;. For example,

.abc{
  ...
  animation-fill-mode: forwards;
}
Veeramani R0
Related