JSFiddle - React, Tailwind, and code Playground

by marco_rensch

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

@keyframes roundInRound {
  0% {margin-top: 0px; margin-left:0px;}
  25% {margin-top: 400px; margin-left:0px;}
  50% {margin-top: 400px; margin-left:400px;}
  75% {margin-top: 0px; margin-left:400px;}
  100% {margin-top: 0px; margin-left:0px;}
}

.parent{
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
  margin: auto;
  background-color: yellow;
}

.child{
  width: 100px;
  height: 100px;
  background-color: red;
  /* Einfache Animation wird aufgerufen */
  animation-name: roundInRound;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}