|
/** |
|
* The first commented line is your dabblet’s title |
|
*/ |
|
|
|
html {background-color: GhostWhite;} |
|
#anim { |
|
width: 75px; |
|
height: 75px; |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
margin-top: -45px; |
|
margin-left: -45px; |
|
border-radius: 5%; |
|
overflow: hidden; |
|
animation: bgcolor linear 8s infinite; |
|
font-size:0; /* (FIX) убираем горизонтальные отступы */ |
|
line-height:0; /* (FIX) и вертикальные */ |
|
letter-spacing: -1px; /* (FIX) переубеждаем webkit'ы */ |
|
display: -moz-inline-stack!important;/* (FIX) */ |
|
} |
|
@keyframes bgcolor { |
|
0% {background: darkgray;} |
|
|
|
} |
|
#anim div { |
|
width: 25px; |
|
height: 25px; |
|
display: inline-block; |
|
animation-name: boxfirst; |
|
animation-duration: .55s; |
|
animation-timing-function: linear; |
|
animation-iteration-count: infinite; |
|
} |
|
.box1 {animation-delay: -.55s;} |
|
.box2 {animation-delay: -.50s;} |
|
.box3 {animation-delay: -.45s;} |
|
.box4 {animation-delay: -.40s;} |
|
.box8 {animation-delay: -.35s;} |
|
.box12 {animation-delay: -.30s;} |
|
.box16 {animation-delay: -.25s;} |
|
.box15 {animation-delay: -.20s;} |
|
.box14 {animation-delay: -.15s;} |
|
.box13 {animation-delay: -.10s;} |
|
.box9 {animation-delay: -.5s;} |
|
.box5 {animation-delay: 0s;} |
|
@keyframes boxfirst { |
|
0% {background-color: rgba(0,0,0,.2)} |
|
50% {background-color: rgba(255,255,255,.2)} |
|
100% {background-color: rgba(0,0,0,.2)} |
|
} |
|
.box6 {animation-delay: 0s; opacity: .5;} |
|
.box7 {animation-delay: .18s; opacity: .5;} |
|
.box10 {animation-delay: .36s; opacity: .5;} |
|
.box11 {animation-delay: .55s; opacity: .5;} |