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

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>

CodePudding user response：

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;
}