JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<div id="container">
  <div class="test10"></div>
</div>

CSS

html, body {
  margin : 0;
  padding: 0;
}

body {
  background : #fdf6e3;
  font-family: "Arial", sans-serif;
}

ol {
  margin      : 30px auto;
  padding-left: 0;
  width       : 620px;
}

code {
  color      : #2aa198;
  font-family: "Menlo", "Monaco", "Consolas", monospace;
}

li:nth-child(even) code {
  color: #d33682;
}

#container {
  margin : 30px auto;
  padding: 9px;
  border : 1px solid #ccc;
  width  : 600px;
}

#container > div {
  position                  : relative;
  margin-bottom             : 10px;
  border-radius             : 50%;
  width                     : 30px;
  height                    : 30px;
  background                : #268bd2;
  color                     : #fff;
  line-height               : 30px;
  text-align                : center;
  -webkit-animation-name    : left-to-right;
  -webkit-animation-duration: 3s;
}

.test10 {
  -webkit-animation-timing-function: ease;
}

#container > div:last-child {
  margin-bottom: 0;
}

@-webkit-keyframes left-to-right {
  from { left: 0; visibility:visible;}
    50% {left: 50%; visibility:hidden;}
    70% {left: 70%; visibility:hidden;}
  to   { left: 570px; visibility:visible;}
}