SASS
$amt: 32px
$rad: 50%
$dst: calc(#{$amt} * 1)
$pos: calc(#{$amt} * 2.5)
$cbez: ease-in-out
$dur: .8s
$quarterdur: calc(.25 * #{$dur})
body
background: #f4f4f4
#container
background: none
position: fixed
width: 100%
height: 100%
left: calc(#{$pos} * -.25)
top: 0
#obj
// Variable
width: $amt
height: $amt
border-radius: $rad
// Static
position: absolute
margin: auto
left: 0
right: 0
top: 0
bottom: 0
-webkit-animation-name: float
-webkit-animation-iteration-count: infinite
-webkit-animation-timing-function: $cbez
-webkit-animation-duration: $dur
&:nth-child(1)
left: calc(#{$pos} * -1)
background: #00664E
&:nth-child(2)
left: 0
background: #007F5F
-webkit-animation-delay: $quarterdur
&:nth-child(3)
left: $pos
background: #069974
-webkit-animation-delay: calc(#{$quarterdur} * 2)
&:nth-child(4)
left: calc(#{$pos} * 2)
background: #0EB289
-webkit-animation-delay: calc(#{$quarterdur} * 3)
@-webkit-keyframes float
0%
top: -$dst
// -webkit-transform: scale(1.1,1.1)
33%
top: $dst
// -webkit-transform: scale(1,1)
66%
top: $dst
// -webkit-transform: scale(1.1,1.1)
100%
top: -$dst
// -webkit-transform: scale(1.1,1.1)
