CSS
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:300");
html, body {
height: 100%;
overflow: hidden;
user-select: none;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(#1a1a1a, #000000);
}
h1 {
font: 300 50px/1 Alegreya Sans, monospace;
white-space: nowrap;
color: whitesmoke;
}
span {
display: inline-block;
animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
transform-origin: center;
}
span:nth-of-type(1) {
animation-delay: 0.25s;
}
span:nth-of-type(2) {
animation-delay: 0.5s;
}
span:nth-of-type(3) {
animation-delay: 0.75s;
}
span:nth-of-type(4) {
animation-delay: 1s;
}
span:nth-of-type(5) {
animation-delay: 1.25s;
}
span:nth-of-type(6) {
animation-delay: 1.5s;
}
span:nth-of-type(7) {
animation-delay: 1.75s;
}
span:nth-of-type(8) {
animation-delay: 2s;
}
span:nth-of-type(9) {
animation-delay: 2.25s;
}
span:nth-of-type(10) {
animation-delay: 2.5s;
}
@keyframes stretch {
5% {
transform: scaleX(5000);
opacity: .1;
}
15% {
transform: scaleX(1);
opacity: 1;
}
}
