CODEWITHSUNDEEP
csscss-animations
stalwart1014
stalwart1014

Reputation: 471

css animation move to left, reappear on right and continue to left

How do I make the blue platform look like its going to the left, reappears on the right and continues going left? To me, It's kind of tricky because it starts from the left, if it starts from the right than that would be easier.

enter image description here

*{
  padding: 0;
  margin: 0;
}
html,body{
  height:100%;
}
.container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#inner{
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  overflow:hidden
}
#platform{
  width:200px;
  height:50px;
  position: relative;
  top: 150px;
  background: blue;
  animation: move 2s linear infinite;
}
@keyframes move{
  0%{
    left:0px;
  }
  50%{
    left:-200px;
  }
  70%{
    right:200px;
  }
  100%{
  left:0%
}
<div class="container">
    <div id="inner">
      <div id="platform"></div>
    </div>
  </div>

Upvotes: 0

Views: 4372

Answers (2)

Temani Afif
Temani Afif

Reputation: 272772

Do it like below:

#inner {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  overflow: hidden
}

#platform {
  width: 200px;
  height: 50px;
  position: relative;
  top: 150px;
  right: 0;
  transform: translate(100%);
  margin-left: auto;
  background: blue;
  animation: move 2s linear infinite;
}

@keyframes move {
  to {
    right: 100%;
    transform: translate(0);
  }
}
<div id="inner">
  <div id="platform"></div>
</div>

Control the delay to start from the left:

#inner {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  overflow: hidden
}

#platform {
  width: 200px;
  height: 50px;
  position: relative;
  top: 150px;
  right: 0;
  transform: translate(100%);
  margin-left: auto;
  background: blue;
  animation: move 2s linear infinite -1.5s;
}

@keyframes move {
  to {
    right: 100%;
    transform: translate(0);
  }
}
<div id="inner">
  <div id="platform"></div>
</div>

Upvotes: 4

Sean Stopnik
Sean Stopnik

Reputation: 1868

This is pretty crude, but you get the idea:

https://codepen.io/seanstopnik/pen/164585fcf077f8cefaef6d0f4fbd9dad

body {
  padding: 60px;
}

.container {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #333;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 0;
  left: -100px;
  height: 60px;
  width: 100px;
  background: blue;
  -webkit-animation: box 2s linear infinite;
          animation: box 2s linear infinite;
}

@-webkit-keyframes box {
  0% {
    transform: translateX(500px);
  }
}

@keyframes box {
  0% {
    transform: translateX(500px);
  }
}
<div class="container">
  <div class="box"></div>
</div>

Upvotes: 1

Related Questions