JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<h1>Easy CSS animation</h1>


<p><strong>Request</strong>: Move the square from left ro right, infinitely. Edge to edge duration is 3 seconds </p>

<div class="square"></div>

CSS

/* DON'T MIND THESE PROPERTIES. NOT RELEVANT FOR NOW */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding:50px;
}

p {
  margin-bottom: 50px;
}


.square {
  width: 100px;
  height: 100px;
  background: #ffc300;
  border-radius: 4px;
  position: relative;
  
    
  /* THIS IS WHERE THE FUN BEGINS   */
  
  animation: square 3s infinite alternate ease-in-out;
  
  /* 
  
  square = the name we gave to the animation
  3s = the duration of the animation for one swing
  infinite = set the animation to repeat infinitely
  alternate = set the animation to go in reverse after it finishes
  ease-in-out = the speed (start slow, speed up, end slow)
  
  */
  
  

}


/*  This is how we define the animation   */

/*

0% represents the beginning of the animation. the moment 0 of the 3s duration timeline
at 0% we tell the cube to stay to the left side



100% represents the end of the 3s duration
here we tell the cubw to be positioned 400px from the left edge



the browser automatically animates the positions of the cube, with the specified time

*/

@keyframes square {
  
  0% { left: 0; }
  
  100% { left: 400px; }
}