CODEWITHSUNDEEP
cssanimation
provance
provance

Reputation: 927

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

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>

Upvotes: 0

Views: 67

Answers (1)

Veeramani R
Veeramani R

Reputation: 145

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

Upvotes: 2

Related Questions