set an element initially hidden and stay visible after finishing animation - css-animations

Question

in the example below:
wrap should be initially hidden
after one second - in should be outside of page
next second - it should go into page
finishing animation - it should stay visible - and here is the problem - it goes hidden
If I remove visibility:hidden at start - it is visible the first second - that's not allowed
how to do this ?
.wrap{
visibility:hidden; width:54px; height:54px; background:orange;
}
.wrap{animation: wrap 1s; animation-delay:1s}
#keyframes wrap{
0% {transform: translateX(-300px); visibility:visible}
100% {transform: translateX(0);}
}
<div class='wrap'></div>

Answer 1

This is happens, when the animation finished, the swap class gets its initial value from itself. To solve this you need add in the last keyframe (100%) visibility: visible; and also add animation-fill-mode: forwards; to stop the animation on the last keyframe.
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
<div class="wrap"></div>