JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id='l'></div>
<div id='r'></div>
<div id='reader'></div>
<hr id='in' noshade size=2 width=170 color=222222>
<hr id='out' noshade size=2 width=170 color=222222>
<div class='katushka' id='lk'></div>
<div class='katushka' id='rk'></div>
</body>
CSS
*{box-sising:border-box;}
body{margin:10px auto; width:640px}
#reader{
width:256px;
height:64px;
margin-left:192px;
background:#333;
clear:left;
border-radius:32px
}
#in{
position:relative;
left: -210px;
top: -35px;
animation-name:input;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-direction:alternate;
animation-duration:5s;
transform-origin:right;
}
@-webkit-keyframes input {
from {
transform:rotate(63deg)
}
to {
transform:rotate(30deg)
}
}
#out{
position:relative;
right: -210px;
top: -46px;
animation-name:output;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-direction:alternate;
animation-duration:5s;
transform-origin:left;
}
@-webkit-keyframes output {
from {
transform:rotate(-30deg)
}
to {
transform:rotate(-63deg)
}
}
#l{
height:64px;
width:64px;
background:#333;
border-radius:256px;
border:solid 128px#600;
float:left;
margin:128px 0px;
animation-name: zoomin;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-direction:alternate;
animation-duration:5s;
}
@-webkit-keyframes zoomin {
from {
border:solid 32px #333;
margin: 96px;
/*transform:rotate(0deg)*/
}
to {
border:solid 128px #333;
margin:0;
/*transform:rotate(360deg)*/
}
}
#r{
height:64px;
width:64px;
background:#333;
border-radius:256px;
border:solid 32px#333;
float:left;
margin:128px 0px;
animation-name: zoomout;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-direction:alternate;
animation-duration:5s;
}
@-webkit-keyframes zoomout {
from {
border:solid 128px #333;
margin:0;
}
to {
border:solid 32px #333;
margin:96px;
...