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