JSFiddle - React, Tailwind, and code Playground

by cloudadida

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container">
  <div class="line"></div>
</div>

<div class="container2">
  <div class="square"></div>
  <div class="stretch"></div>
</div>
</body>
</html>

CSS

.container{
  width: 200px;
  height: 50px;
  position: relative;
}

.line{
  height: 3px;
  width: 100%;
  background-color: tomato;
  animation: lineart 2s ease-in-out infinite alternate forwards;
}

.line::after{
  content: " ";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: tomato;
  position: absolute;
  right: 0;
  transform: translateY(-30%);
  animation: dot 2s ease-in-out infinite alternate forwards;
}

@keyframes lineart{
  
  from{
   width: 0%;
  }
  
  to{
   width: 100%;
  }
}

@keyframes dot{
  from{
    left: 0px;
  }
  to{
    left: 200px;
  }
}


.container2{
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: relative;
  scroll-timeline-name: --scrolltimeline;
}

.square{
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
  left: 100px;
}