Wouter Raateland
@keyframes pendulumLeft {
0% { transform: none; width: .5em; }
25% { transform: rotate(20deg); }
50% { transform: none; width: .5em; }
50.001% { width: 4.5em; }
100% { width: 4.5em; }
}
@keyframes pendulumRight {
0% { width: 4.5em; }
49.999% { width: 4.5em; }
50% { transform: none; width: .5em; }
75% { transform: rotate(-20deg); }
100% { transform: none; width: .5em; }
}
.box::before {
content: 'HelloWorl';
animation-name: pendulumLeft;
}
.box::after {
content: 'elloWorld';
direction: rtl;
animation-name: pendulumRight;
}
.box::before,
.box::after {
overflow: hidden;
padding-top: 3.5em;
transform-origin: .25em .25em;
background: linear-gradient(90deg, transparent 6px, #999 6px, #999 8px, transparent 8px) repeat-x left top 3px, radial-gradient(ellipse 6px 6px at 7px 6px, #999 85%, transparent 100%) repeat-x;
background-size: 14px 4em;
animation-duration: 6s;
animation-timing-function: cubic-bezier(.5, 0, .5, 1);
animation-iteration-count: infinite;
}
/* Interesting challenge for sure! */