Submitted solutions for "Newton World"

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! */