JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="stick"></div>
<div class="_stick"></div>

CSS

body {
  margin: 0;
  overflow: hidden;
}
*{
  box-sizing: border-box;
}
div.stick {
  width: 100%;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  animation:a .5s infinite;
}
div._stick {
  width: 20px;
  height: 100%;
  position: absolute;
  right: 0;
  animation: b .5s infinite;
  top: 0;
  background: red;
}
@keyframes a{
  from { transform: translateY(-100%);}
  to {transform: translateX(0)}
}
@keyframes b{
  from { transform: translateX(100%)}
  to {transform: translateX(0)}
}