/* ---------------------------------------------------------------- page-loaders.scss -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- Page Transitions -----------------------------------------------------------------*/ .page-transition #wrapper, .animsition-overlay { position: relative; opacity: 0; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .page-transition-wrap, .css3-spinner { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; text-align: center; background-color: #FFF; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-perspective: 1000; } .css3-spinner { position: absolute; z-index: auto; background-color: transparent; } .css3-spinner > div { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: 13px; width: 18px; height: 18px; background-color: #dddddd; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .css3-spinner .css3-spinner-bounce1 { margin-left: -31px; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .css3-spinner .css3-spinner-bounce2 { margin-left: -9px; -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } .css3-spinner > .css3-spinner-flipper { width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; border-radius: 0; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .css3-spinner > .css3-spinner-double-bounce1, .css3-spinner > .css3-spinner-double-bounce2 { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; border-radius: 50%; opacity: 0.6; -webkit-animation: cssspinnerbounce 2.0s infinite ease-in-out; animation: cssspinnerbounce 2.0s infinite ease-in-out; } .css3-spinner > .css3-spinner-double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes cssspinnerbounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } @keyframes cssspinnerbounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } .css3-spinner > .css3-spinner-rect1, .css3-spinner > .css3-spinner-rect2, .css3-spinner > .css3-spinner-rect3, .css3-spinner > .css3-spinner-rect4, .css3-spinner > .css3-spinner-rect5 { height: 30px; width: 6px; margin-top: -15px; margin-left: -21px; border-radius: 0; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .css3-spinner > .css3-spinner-rect2 { margin-left: -12px; -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .css3-spinner > .css3-spinner-rect3 { margin-left: -3px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .css3-spinner > .css3-spinner-rect4 { margin-left: 6px; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .css3-spinner > .css3-spinner-rect5 { margin-left: 15px; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } .css3-spinner > .css3-spinner-cube1, .css3-spinner > .css3-spinner-cube2 { width: 16px; height: 16px; border-radius: 0; margin-top: -20px; margin-left: -20px; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .css3-spinner > .css3-spinner-cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } .css3-spinner > .css3-spinner-scaler { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } .css3-spinner > .css3-spinner-grid-pulse { display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; background-color: transparent !important; -webkit-animation: none; animation: none; } .css3-spinner-grid-pulse > div { background-color: #dddddd; width: 12px; height: 12px; max-width: 12px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; -webkit-animation-name: ball-grid-pulse; animation-name: ball-grid-pulse; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0; } .css3-spinner-grid-pulse > div:nth-child(1) { -webkit-animation-delay: 0.73s; animation-delay: 0.73s; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; } .css3-spinner-grid-pulse > div:nth-child(2) { -webkit-animation-delay: 0.32s; animation-delay: 0.32s; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; } .css3-spinner-grid-pulse > div:nth-child(3) { -webkit-animation-delay: 0.71s; animation-delay: 0.71s; -webkit-animation-duration: 0.88s; animation-duration: 0.88s; } .css3-spinner-grid-pulse > div:nth-child(4) { -webkit-animation-delay: 0.62s; animation-delay: 0.62s; -webkit-animation-duration: 1.06s; animation-duration: 1.06s; } .css3-spinner-grid-pulse > div:nth-child(5) { -webkit-animation-delay: 0.31s; animation-delay: 0.31s; -webkit-animation-duration: 0.62s; animation-duration: 0.62s; } .css3-spinner-grid-pulse > div:nth-child(6) { -webkit-animation-delay: -0.14s; animation-delay: -0.14s; -webkit-animation-duration: 1.48s; animation-duration: 1.48s; } .css3-spinner-grid-pulse > div:nth-child(7) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; -webkit-animation-duration: 1.47s; animation-duration: 1.47s; } .css3-spinner-grid-pulse > div:nth-child(8) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-duration: 1.49s; animation-duration: 1.49s; } .css3-spinner-grid-pulse > div:nth-child(9) { -webkit-animation-delay: 0.73s; animation-delay: 0.73s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; } @-webkit-keyframes ball-grid-pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes ball-grid-pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .css3-spinner > .css3-spinner-clip-rotate { width: 33px; height: 33px; margin-top: -17px; margin-left: -17px; background-color: transparent !important; -webkit-animation: none; animation: none; } .css3-spinner-clip-rotate > div { border-radius: 100%; border: 2px solid #dddddd; border-bottom-color: transparent !important; height: 33px; width: 33px; background: transparent !important; -webkit-animation: rotate 1s 0s linear infinite; animation: rotate 1s 0s linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(0.6); transform: rotate(180deg) scale(0.6); } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(0.6); transform: rotate(180deg) scale(0.6); } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } .css3-spinner > .css3-spinner-ball-rotate { width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; background-color: transparent !important; -webkit-animation: ballrotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; animation: ballrotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; } .css3-spinner-ball-rotate > div { background-color: #dddddd; width: 12px; height: 12px; border-radius: 100%; position: relative; } .css3-spinner-ball-rotate > div:nth-child(1), .css3-spinner-ball-rotate > div:nth-child(3) { width: 12px; height: 12px; border-radius: 100%; content: ""; position: absolute; opacity: 0.7; } .css3-spinner-ball-rotate > div:nth-child(1) { top: 0px; left: -22px; } .css3-spinner-ball-rotate > div:nth-child(3) { top: 0px; left: 22px; } @-webkit-keyframes ballrotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ballrotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .css3-spinner > .css3-spinner-zig-zag { background-color: transparent !important; -webkit-transform: translate(-15px, -15px); -ms-transform: translate(-15px, -15px); transform: translate(-15px, -15px); -webkit-animation: none; animation: none; } .css3-spinner-zig-zag > div { background-color: #dddddd; width: 12px; height: 12px; border-radius: 100%; position: absolute; margin-left: 15px; top: 4px; left: -7px; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .css3-spinner-zig-zag > div:first-child { -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear; animation: ball-zig-deflect 1.5s 0s infinite linear; } .css3-spinner-zig-zag > div:last-child { -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear; animation: ball-zag-deflect 1.5s 0s infinite linear; } @-webkit-keyframes ball-zig-deflect { 17% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px); } 34% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 67% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px); } 84% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes ball-zig-deflect { 17% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px); } 34% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 67% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px); } 84% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes ball-zag-deflect { 17% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px); } 34% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 67% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 84% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes ball-zag-deflect { 17% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px); } 34% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 67% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 84% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .css3-spinner > .css3-spinner-ball-scale-multiple { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; background-color: transparent !important; -webkit-animation: none; animation: none; } .css3-spinner-ball-scale-multiple > div { background-color: #dddddd; border-radius: 100%; position: absolute; left: 0; top: 0; opacity: 0; width: 60px; height: 60px; -webkit-animation: ball-scale-multiple 1.25s 0s linear infinite; animation: ball-scale-multiple 1.25s 0s linear infinite; } .css3-spinner-ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .css3-spinner-ball-scale-multiple > div:nth-child(3) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } @-webkit-keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .css3-spinner > .css3-spinner-triangle-path { background-color: transparent !important; -webkit-transform: translate(-29.994px, -37.50938px); -ms-transform: translate(-29.994px, -37.50938px); transform: translate(-29.994px, -37.50938px); -webkit-animation: none; animation: none; } .css3-spinner-triangle-path > div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 10px; height: 10px; border-radius: 100%; background-color: #dddddd; } .css3-spinner-triangle-path > div:nth-child(1) { -webkit-animation: ball-triangle-path-1 2s 0s ease-in-out infinite; animation: ball-triangle-path-1 2s 0s ease-in-out infinite; } .css3-spinner-triangle-path > div:nth-child(2) { -webkit-animation: ball-triangle-path-2 2s 0s ease-in-out infinite; animation: ball-triangle-path-2 2s 0s ease-in-out infinite; } .css3-spinner-triangle-path > div:nth-child(3) { -webkit-animation: ball-triangle-path-3 2s 0s ease-in-out infinite; animation: ball-triangle-path-3 2s 0s ease-in-out infinite; } .css3-spinner-triangle-path > div:nth-of-type(1) { top: 50px; } .css3-spinner-triangle-path > div:nth-of-type(2) { left: 25px; } .css3-spinner-triangle-path > div:nth-of-type(3) { top: 50px; left: 50px; } @-webkit-keyframes ball-triangle-path-1 { 33% { -webkit-transform: translate(25px, -50px); transform: translate(25px, -50px); } 66% { -webkit-transform: translate(50px, 0px); transform: translate(50px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes ball-triangle-path-1 { 33% { -webkit-transform: translate(25px, -50px); transform: translate(25px, -50px); } 66% { -webkit-transform: translate(50px, 0px); transform: translate(50px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes ball-triangle-path-2 { 33% { -webkit-transform: translate(25px, 50px); transform: translate(25px, 50px); } 66% { -webkit-transform: translate(-25px, 50px); transform: translate(-25px, 50px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes ball-triangle-path-2 { 33% { -webkit-transform: translate(25px, 50px); transform: translate(25px, 50px); } 66% { -webkit-transform: translate(-25px, 50px); transform: translate(-25px, 50px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes ball-triangle-path-3 { 33% { -webkit-transform: translate(-50px, 0px); transform: translate(-50px, 0px); } 66% { -webkit-transform: translate(-25px, -50px); transform: translate(-25px, -50px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes ball-triangle-path-3 { 33% { -webkit-transform: translate(-50px, 0px); transform: translate(-50px, 0px); } 66% { -webkit-transform: translate(-25px, -50px); transform: translate(-25px, -50px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } .css3-spinner > .css3-spinner-ball-pulse-sync { width: 70px; height: 34px; margin-left: -35px; margin-top: -17px; background-color: transparent !important; -webkit-animation: none; animation: none; } .css3-spinner-ball-pulse-sync > div { display: inline-block; background-color: #dddddd; width: 14px; height: 14px; margin: 10px 3px 0; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .css3-spinner-ball-pulse-sync > div:nth-child(0) { -webkit-animation: ball-pulse-sync 0.7s -0.21s infinite ease-in-out; animation: ball-pulse-sync 0.7s -0.21s infinite ease-in-out; } .css3-spinner-ball-pulse-sync > div:nth-child(1) { -webkit-animation: ball-pulse-sync 0.7s -0.14s infinite ease-in-out; animation: ball-pulse-sync 0.7s -0.14s infinite ease-in-out; } .css3-spinner-ball-pulse-sync > div:nth-child(2) { -webkit-animation: ball-pulse-sync 0.7s -0.07s infinite ease-in-out; animation: ball-pulse-sync 0.7s -0.07s infinite ease-in-out; } .css3-spinner-ball-pulse-sync > div:nth-child(3) { -webkit-animation: ball-pulse-sync 0.7s 0s infinite ease-in-out; animation: ball-pulse-sync 0.7s 0s infinite ease-in-out; } @-webkit-keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0.85; } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0.7; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0.85; } 66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0.7; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .css3-spinner > .css3-spinner-scale-ripple { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; background-color: transparent !important; -webkit-animation: none; animation: none; } .css3-spinner-scale-ripple > div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; top: 0; width: 50px; height: 50px; border-radius: 100%; border: 2px solid #dddddd; -webkit-animation: ball-scale-ripple-multiple 1.4s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation: ball-scale-ripple-multiple 1.4s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } .css3-spinner-scale-ripple > div:nth-child(0) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .css3-spinner-scale-ripple > div:nth-child(1) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .css3-spinner-scale-ripple > div:nth-child(2) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .css3-spinner-scale-ripple > div:nth-child(3) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } @-webkit-keyframes ball-scale-ripple-multiple { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 1; } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.7; } 100% { opacity: 0.0; } } @keyframes ball-scale-ripple-multiple { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 1; } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.7; } 100% { opacity: 0.0; } }