CSS
html {
font-size: 1px;
}
body {
margin: 0;
font-family: 'Work Sans', sans-serif;
font-size: 30rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #2980b9;
}
main {
position: relative;
display: flex;
}
h1 {
margin: 0;
color: #fff;
}
h1, .marker {
transform: translateX(0);
animation-timing-function: cubic-bezier(0.15, -0.01, 0.58, 1);
animation-duration: 5s;
animation-iteration-count: infinite;
}
.marker {
position: absolute;
top: 0;
left: -3px;
height: 8px;
width: 40px;
background-color: #f35e5c;
animation-name: marker;
}
.r {
margin-left: 1rem;
animation-name: r;
}
.e1 {
margin-left: 7rem;
animation-name: e1;
}
.s1 {
margin-left: 16rem;
animation-name: s1;
}
.s2 {
margin-left: 21rem;
animation-name: s2;
}
.e2 {
margin: 0 36rem 0 42rem;
animation-name: e2;
}
@keyframes r {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(35rem);
}
}
@keyframes e1 {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(75rem);
}
}
@keyframes s1 {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(81rem);
}
}
@keyframes s2 {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(71rem);
}
}
@keyframes e2 {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(34rem);
}
}
@keyframes marker {
0%, 20% {
transform: translateX(0);
}
50%, 70% {
transform: translateX(337rem);
}
}
