1 line
84 KiB
CSS
1 line
84 KiB
CSS
|
.double-bounce{width:40px;height:40px;position:relative;margin:40px auto}.double-bounce .child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:doubleBounce 2s infinite ease-in-out;-moz-animation:doubleBounce 2s infinite ease-in-out;-o-animation:doubleBounce 2s infinite ease-in-out;animation:doubleBounce 2s infinite ease-in-out}.double-bounce .double-bounce2{-webkit-animation-delay:-1s;-moz-animation-delay:-1s;-o-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes doubleBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes doubleBounce{0%,100%{-moz-transform:scale(0);transform:scale(0)}50%{-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes doubleBounce{0%,100%{-o-transform:scale(0);transform:scale(0)}50%{-o-transform:scale(1);transform:scale(1)}}@keyframes doubleBounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.chasing-dots{width:40px;height:40px;position:relative;text-align:center;-webkit-animation:chasingDotsRotate 2s infinite linear;-moz-animation:chasingDotsRotate 2s infinite linear;-o-animation:chasingDotsRotate 2s infinite linear;animation:chasingDotsRotate 2s infinite linear}.chasing-dots .child{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:chasingDotsBounce 2s infinite ease-in-out;-moz-animation:chasingDotsBounce 2s infinite ease-in-out;-o-animation:chasingDotsBounce 2s infinite ease-in-out;animation:chasingDotsBounce 2s infinite ease-in-out}.chasing-dots .dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;-moz-animation-delay:-1s;-o-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes chasingDotsRotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes chasingDotsRotate{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes chasingDotsRotate{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes chasingDotsRotate{100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes chasingDotsBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes chasingDotsBounce{0%,100%{-moz-transform:scale(0);transform:scale(0)}50%{-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes chasingDotsBounce{0%,100%{-o-transform:scale(0);transform:scale(0)}50%{-o-transform:scale(1);transform:scale(1)}}@keyframes chasingDotsBounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.cube-grid{width:40px;height:40px;margin:40px auto}.cube-grid .cube{width:33.33%;height:33.33%;background-color:#333;float:left;-webkit-animation:cubeGridScaleDelay 1.3s infinite ease-in-out;-moz-animation:cubeGridScaleDelay 1.3s infinite ease-in-out;-o-animation:cubeGridScaleDelay 1.3s infinite ease-in-out;animation:cubeGridScaleDelay 1.3s infinite ease-in-out}.cube-grid .cube1{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}.cube-grid .cube2{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-o-animation-delay:.3s;animation-delay:.3s}.cube-grid .cube3{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}.cube-grid .cube4{-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-o-animation-delay:.1s;animation-delay:.1s}.cube-grid .cube5{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}.cube-grid .cube6{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-o-animation-delay:.3s;animation-delay:.3s}.cube-grid .cube7{-webkit-animation-delay:0ms;-moz-animation-delay:0ms;-o-anima
|