set an element initially hidden and stay visible after finishing animation

user_10983537 0
Viewed 47

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>

css-animations
1 Answers

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>

user_155451160
Related