CODEWITHSUNDEEP
css
methuselah
methuselah

Reputation: 13216

Transition in element from right

I have the following element that is transitioning from left to right, how do I get it to transition from right to left without any gaps between the element and the right of the page.

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 5s ease-out 0s 1 slideInFromLeft;
  z-index: 1;
  background: #333;
  padding: 30px;
  position: fixed;
  top: 10%;
  color: #fff;
}
<header>
  Test
</header>

Fiddle here: https://jsfiddle.net/yy3qtbef/1/.

Upvotes: 0

Views: 73

Answers (2)

VXp
VXp

Reputation: 12118

To remove the undesired gap, you need to get rid of the default margin with the margin: 0 (or you can give it to the body element), to slide it from the right, position it there with the right: 0, and change the value of the transform property to translateX(100%), which will make sure that the element is off the screen before it slides to the left:

header {
  animation: 5s ease-out 0s 1 slideInFromRight;
  z-index: 1;
  background: #333;
  margin: 0; /* added */
  padding: 30px;
  position: fixed;
  top: 10%;
  right: 0; /* added */
  color: #fff;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%); /* modified */
  }
  100% {
    transform: translateX(0);
  }
}
<header>Test</header>

Upvotes: 1

vishugosain
vishugosain

Reputation: 180

If I correctly understand your question, Add

right: 20px

to the .header class and change - 

translateX(-100%)

to

translateX(100%)

Here is the demo - https://jsfiddle.net/r0jf2a1y/

Upvotes: 3

Related Questions