Pure CSS slide effect

Question

I need some element (with position: fixed) to slide on the right side of the screen, stay there for a while and hide again on the right. I do not know the width, which makes it difficult to achieve. I have done this with jQuery before, but I would like to use pure CSS. Is it possible? I am not against using a third-party solution.

Here is my jQuery code:

$("element")
    .css("right", -$("element").outerWidth() + "px")
    .animate({right: 0}, 800)
    .delay(3000)
    .animate({right: -$("element").outerWidth() + "px"}, 800);

Answer 1

You can define @keyframesand use percentage values ​​for a property transformif widthunknown.

div {
  width: 100px;
  height: 100px;
  background: plum;
  transform: translateX(100%);
  position: fixed;
  -webkit-animation: anim 3.5s 1;
  animation: anim 3.5s 1;
}
@-webkit-keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<div></div>

Run codeHide result