animation-around.md

Animation around target

make a box move arround target circular box https://play.tailwindcss.com/opZjZfn3o6?file=css

reference: https://www.youtube.com/watch?v=azoIMhKOucQ

<main class="h-screen w-screen grid place-content-center">
  <div class="ani-container">
    <div class="box"></div>
    <div class="ani"></div>
  </div>
</main>

@tailwind base;
@tailwind components;
@tailwind utilities;

.ani-container {
  --box-size: 100px;
  @apply relative;

  transform: translateY(calc(var(--box-size) * -1.5)) translateX(calc(var(--box-size) * -0.5));
}

.box {
  @apply absolute aspect-square rounded-full bg-yellow-500;
  width: var(--box-size);
  transform: translateY(var(--box-size));
}

.ani {
  width: var(--box-size);

  @apply absolute aspect-square bg-blue-500 rounded-3xl;

  animation: box-move 1s linear infinite;
}

@keyframes box-move {
  from {
    transform: translateY(var(--box-size)) rotate(0deg) translateY(calc(var(--box-size) * -1));
  }
  to {
    transform: translateY(var(--box-size)) rotate(-360deg) translateY(calc(var(--box-size) * -1));
  }
}