'CSS animation with squares

So recently I had my exams and unfortunately failed because of CSS animation. One of the tasks was to make CSS animation with the squares.

I can't remember the exact question and task but it was like this:

  • Make three squares and let the first one go for 2 seconds to the right
  • Wait for the second square to do the same thing, without returning back.
  • The third one should do the same thing
  • After the third square touches the right side, they all should go back to the first place.

Does anyone have an idea how I can make squares to go back to the first place?

.row {
  margin-bottom: 10px;
}


.row div {
  display: inline-block;
  padding: 50px;
  background-color: red;
  position: relative;

}

#first {
  animation: first 2s linear forwards 0ms,
  back 2s linear alternate 5s;

}

#second {
  animation: first 2s linear forwards 2s;
}

#third {
  animation: first 2s linear forwards 4s;
}

@keyframes first {
  0% {
    left: 0;

  }

  100% {
    left: 100%;

  }
}

@keyframes back {
  0% {
    right: 0%;

  }

  100% {
    right: 100%;

  }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation testing</title>
    </head>
    <body>

    <div class="row">
      <div id="first"></div>
    
    </div>
    <div class="row">
      <div id="second"></div>
     
    </div>
    <div class="row">
      <div id="third"></div>
      
    </div>
    

    </body>
</html>
csscss-animations


Solution 1:[1]

Interesting task. Today I learned something. Actually my first animation ever :)

To move the squares to the right:

  • I have used your existing and already correctly working first, second, and third keyframes with the same timings.
  • The first starts at 0s and takes 2 seconds, the second starts after two seconds and takes two seconds, so the third after 4 seconds.

To return the squares:

  • I have defined another back keyframe.
  • To start the back keyframe, I have added back 2s linear forwards 6s to all elements as a second animation.

The second animation takes 2 seconds and starts after 6 seconds when all others are finished (3 * 2 seconds each).

Note: You could also reverse the positions in the back keyframe and use one of the alternatives to forwards instead, see https://www.w3schools.com/css/css3_animations.asp.

.row {
  margin-bottom: 10px;
}

.row div {
  display: inline-block;
  padding: 50px;
  background-color: red;
  position: relative;
}

#first {
  animation: first 2s linear forwards 0s,
  back 2s linear forwards 6s;
}

#second {
  animation: second 2s linear forwards 2s,
  back 2s linear forwards 6s;
}

#third {
  animation: third 2s linear forwards 4s,
  back 2s linear forwards 6s;
}

@keyframes first {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@keyframes second{
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@keyframes third{
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@keyframes back{
  0% {
    left: 100%;
  }

  100% {
    left: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation testing</title>
    </head>
    <body>

    <div class="row">
      <div id="first"></div>
    
    </div>
    <div class="row">
      <div id="second"></div>
     
    </div>
    <div class="row">
      <div id="third"></div>
      
    </div>
    

    </body>
</html>

Solution 2:[2]

Try this, it may work.

.move-me {
  display: inline-block;
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}
.move-me-1 {
  animation: move-in-steps 8s steps(4) infinite;
}
.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
  animation: move-in-steps 8s infinite;
}

body {
  padding: 20px;
}

@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }
  100% {
    left: 100%;
    background: red;
  }
}
<div class="move-me move-me-1">steps(4, end)</div>
<br>
<div class="move-me move-me-2">steps(4, start)</div>
<br>
<div class="move-me move-me-3">no steps</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 TheHesh19

Related Questions