/*======================================================== DARK LAYOUT =========================================================*/ @-webkit-keyframes line-scale-party { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } @keyframes line-scale-party { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } .line-scale-party > div:nth-child(1) { -webkit-animation-delay: 0.77s; animation-delay: 0.77s; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; } .line-scale-party > div:nth-child(2) { -webkit-animation-delay: 0.37s; animation-delay: 0.37s; -webkit-animation-duration: 1.19s; animation-duration: 1.19s; } .line-scale-party > div:nth-child(3) { -webkit-animation-delay: 0.68s; animation-delay: 0.68s; -webkit-animation-duration: 0.51s; animation-duration: 0.51s; } .line-scale-party > div:nth-child(4) { -webkit-animation-delay: 0.31s; animation-delay: 0.31s; -webkit-animation-duration: 0.97s; animation-duration: 0.97s; } .line-scale-party > div { background-color: #b8c2cc; width: 4px; height: 3.45rem; border-radius: 2px; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; -webkit-animation-name: line-scale-party; animation-name: line-scale-party; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0; animation-delay: 0; }