CSS animation with squares-CodePudding

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, and wait for the second square to do the same thing, without returning back. The third one should do the same thing and 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 wait for each other?

.row {
  margin-bottom: 10px;
}


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

}

#first{
  animation: first 5s infinite linear alternate;
}


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

  100% {
    left: 100%;
  
  }
}

@keyframes prvi {
  0% {
    left: 0;
    background: blue;
  }

  100% {
    left: 100%;
    background: red;
  }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation testing</title>
    <link rel="stylesheet" href="css/kvadrati.css">
    </head>
    <body>

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

    </body>
</html>

CodePudding user response：

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 >steps(4, end)</div>
<br>
<div >steps(4, start)</div>
<br>
<div >no steps</div>

CodePudding user response：

From https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Defining the animation sequence using keyframes

Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.

You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.