1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- /*========================================================
- DARK LAYOUT
- =========================================================*/
- @-webkit-keyframes rotate {
- 0% {
- transform: rotate(0deg) scale(1);
- }
- 50% {
- transform: rotate(180deg) scale(0.6);
- }
- 100% {
- transform: rotate(360deg) scale(1);
- }
- }
- @keyframes rotate {
- 0% {
- transform: rotate(0deg) scale(1);
- }
- 50% {
- transform: rotate(180deg) scale(0.6);
- }
- 100% {
- transform: rotate(360deg) scale(1);
- }
- }
- @-webkit-keyframes scale {
- 30% {
- transform: scale(0.3);
- }
- 100% {
- transform: scale(1);
- }
- }
- @keyframes scale {
- 30% {
- transform: scale(0.3);
- }
- 100% {
- transform: scale(1);
- }
- }
- .ball-clip-rotate-pulse {
- position: relative;
- transform: translateY(-15px);
- }
- .ball-clip-rotate-pulse > div {
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- position: absolute;
- top: 0px;
- left: 0px;
- border-radius: 100%;
- }
- .ball-clip-rotate-pulse > div:first-child {
- background: #b8c2cc;
- height: 16px;
- width: 16px;
- top: 7px;
- left: -7px;
- -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
- animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
- }
- .ball-clip-rotate-pulse > div:last-child {
- position: absolute;
- border: 2px solid #b8c2cc;
- width: 30px;
- height: 30px;
- left: -16px;
- top: -2px;
- background: transparent;
- border: 2px solid;
- border-color: #b8c2cc transparent #b8c2cc transparent;
- -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
- animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- }
|