<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="coast"> <div class="wave-rel-wrap"> <div class="wave"></div> </div> </div> <div class="coast delay"> <div class="wave-rel-wrap"> <div class="wave delay"></div> </div> </div> <div class="text text-w">l</div> <div class="text text-a">o</div> <div class="text text-v">a</div> <div class="text text-a">o</div> <div class="text text-x">e</div> <div class="text text-z">o</div> </div>

@import url("https://fonts.googleapis.com/css?family=Muli"); *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 62.5%; background-color: #00091B; font-family: 'Muli', Helvetica, sans-serif; } .container { position: absolute; width: 17rem; height: 10rem; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .text { color: #fff; font-size: 6rem; font-weight: 900; display: inline-block; position: absolute; bottom: 0; -webkit-animation: text 1050ms ease-in infinite; animation: text 1050ms ease-in infinite; -webkit-transform: translatez(0); transform: translatez(0); } .text-w { left: 0rem; -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); -webkit-animation: text-w 1050ms ease-in infinite; animation: text-w 1050ms ease-in infinite; } .text-a { left: 5.4rem; -webkit-animation-delay: 150ms; animation-delay: 150ms; } .text-v { left: 9.6rem; -webkit-animation-delay: 230ms; animation-delay: 230ms; } .text-e { left: 13rem; -webkit-animation-delay: 310ms; animation-delay: 310ms; } .coast { position: absolute; left: 1.3rem; bottom: 1.7rem; width: 6.2rem; height: 2.2rem; display: inline-block; -webkit-animation: coast 2100ms linear infinite; animation: coast 2100ms linear infinite; -webkit-transform: translateZ(0); transform: translateZ(0); } .wave-rel-wrap { position: relative; width: 100%; height: 100%; -webkit-perspective: 3rem; perspective: 3rem; -webkit-perspective-origin: 0%, 50%; perspective-origin: 0%, 50%; } .wave { position: absolute; width: 6.2rem; height: 2.2rem; border-radius: 1.1rem; background: -webkit-radial-gradient(center ellipse, #74f1fc 0%, #32e6ff 73%, #15c7fa 100%); background: radial-gradient(ellipse at center, #74f1fc 0%, #32e6ff 73%, #15c7fa 100%); display: inline-block; -webkit-animation: wave 2100ms linear infinite; animation: wave 2100ms linear infinite; will-change: width; -webkit-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0); } .delay { -webkit-animation-delay: 1050ms; animation-delay: 1050ms; } @-webkit-keyframes text { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 45% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes text { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 45% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes text-w { 0% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 38% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 69% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } } @keyframes text-w { 0% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 38% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } 69% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -4rem, 0); transform: translate3d(0, -4rem, 0); } } @-webkit-keyframes coast { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 23% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } 100% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } } @keyframes coast { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 23% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } 100% { -webkit-transform: translate3d(16rem, 0, 0); transform: translate3d(16rem, 0, 0); } } @-webkit-keyframes wave { 0% { -webkit-transform: scale(0); transform: scale(0); width: 2.2rem; } 10% { -webkit-transform: scale(1); transform: scale(1); } 23% { width: 2.2rem; } 32% { width: 6.1rem; } 42% { width: 5rem; -webkit-transform: rotateY(0deg) scale(1, 1); transform: rotateY(0deg) scale(1, 1); } 51% { -webkit-transform: rotateY(90deg) scale(0.6, 0.2); transform: rotateY(90deg) scale(0.6, 0.2); } 52% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } 100% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } } @keyframes wave { 0% { -webkit-transform: scale(0); transform: scale(0); width: 2.2rem; } 10% { -webkit-transform: scale(1); transform: scale(1); } 23% { width: 2.2rem; } 32% { width: 6.1rem; } 42% { width: 5rem; -webkit-transform: rotateY(0deg) scale(1, 1); transform: rotateY(0deg) scale(1, 1); } 51% { -webkit-transform: rotateY(90deg) scale(0.6, 0.2); transform: rotateY(90deg) scale(0.6, 0.2); } 52% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } 100% { -webkit-transform: rotateY(90deg) scale(0); transform: rotateY(90deg) scale(0); } }