CODEWITHSUNDEEP
htmlcssanimation
JGeorgeJ
JGeorgeJ

Reputation: 373

Best way to create animation form left to right with css

I wan to make animation from left to right (animation start in invisible area like left: -100px) and end in invisible area too (right: -100px) I am using this code which works but not correctly on different sizes of screens becuase is in %. And i need to remake it but i dont know how.

.ip_first_block {
    
    width: 100%;
    height: 100%;
}

section {
    position: relative;
    overflow: hidden;
} 

.ip_welcome_text {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.astronaut1 {
  position: relative;
  animation: lefttoright 10s;
  animation-fill-mode: forwards;
}

@keyframes lefttoright {
  from {
    transform: translateX(-1500%);
  }
  to {
    transform: translateX(2200%);
  }
}
<section style="height:100%;">
        <div class="ip_first_block" id="ifb">
<div class="ip_welcome_text">
<div class="astronaut1">
  <img src="images/astronaut.svg" height="70px" ; width="70px;" />
</div>
</div>
</div>
</section>

Upvotes: 0

Views: 114

Answers (1)

VXp
VXp

Reputation: 12058

It's easier if you animate the position, e.g. left property:

body {margin: 0}

.astronaut1 {
  overflow: hidden;
}

img {
  position: relative;
  left: -70px; /* starting point; needs to be at least the img width to hide it */
  animation: lefttoright 10s forwards;
}

@keyframes lefttoright {
  to {left: 100%} /* cover the entire parent width */
}
<div class="astronaut1">
  <img src="http://placehold.it/70x70" alt="" height="70" width="70">
</div>

Upvotes: 1

Related Questions