JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hanging-div">This is a div</div>
CSS
@-moz-keyframes pendulum {
50% {
-moz-transform:rotate(300deg);
}
}
@-ms-keyframes pendulum {
50% {
-ms-transform:rotate(30deg);
}
}
@-o-keyframes pendulum {
50% {
-o-transform:rotate(30deg);
}
}
@-webkit-keyframes pendulum {
50% {
-webkit-transform:rotate(30deg);
}
}
@keyframes pendulum {
50% {
transform:rotate(30deg);
}
}
.hanging-div {
font-weight:600;
text-align:center;
color:#fff;
margin:0 auto;
display:block;
width:200px;
padding:50px 0;
background:#f00;
-moz-animation: pendulum;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 2s;
-moz-transform-origin: top left;
-ms-animation: pendulum;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 2s;
-ms-transform-origin: top left;
-o-animation: pendulum;
-o-animation-iteration-count: infinite;
-o-animation-duration: 2s;
-o-transform-origin: top left;
-webkit-animation: pendulum;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-transform-origin: top left;
animation: pendulum;
animation-iteration-count: infinite;
animation-duration: 2s;
transform-origin: top left;
}