CODEWITHSUNDEEP
cssanimationslide
Robo Robok
Robo Robok

Reputation: 22693

Slide right effect with pure CSS

I need to make certain element (with position: fixed) slide from the right side of the screen, stay there for a while and hide from right again. I don't know the width, which makes it harder to achieve. I did it with jQuery before, but I'd like to use pure CSS. Is that possible? I don't mind using third party solution.

Here's my jQuery code:

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

Upvotes: 4

Views: 21450

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

You could define @keyframes and use percentage values for the transform property if the width is unknown.

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>

Upvotes: 8

Related Questions