<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>
@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);
}
}
