@-webkit-keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(6px); transform: translateY(6px) } 66% { -webkit-transform: translateY(-6px); transform: translateY(-6px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes ball-pulse-sync { 33% { -webkit-transform: translateY(6px); transform: translateY(6px) } 66% { -webkit-transform: translateY(-6px); transform: translateY(-6px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } .ball-pulse-sync>div:nth-child(1) { -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out; animation: ball-pulse-sync .6s -.14s infinite ease-in-out } .ball-pulse-sync>div:nth-child(2) { -webkit-animation: ball-pulse-sync .6s -70ms infinite ease-in-out; animation: ball-pulse-sync .6s -70ms infinite ease-in-out } .ball-pulse-sync>div:nth-child(3) { -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out; animation: ball-pulse-sync .6s 0s infinite ease-in-out } .ball-pulse-sync>div { width: 8px; height: 8px; -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } @keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } .ball-pulse-sync>div,.ball-pulse>div,.ball-scale-random>div,.ball-scale>div { background-color: #f28969; border-radius: 100%; margin: 2px; display: inline-block } .ball-pulse-sync { display: flex; }