p > #foo + .bar {
    align-content: space-between;
    align-items: center;
    align-self: auto;
    all: inherit;
    animation: 3s ease-in 1s 2 reverse both paused slidein;
    animation-delay: 4ms;
    animation-direction: alternate-reverse;
    animation-duration: 5s;
    animation-iteration-count: 9;
    animation-name: my-animation;
    animation-play-state: paused;
    animation-timing-function: ease-in;
    backface-visibility: visible;
    background-attachment: local;
    background-blend-mode: darken;
    background-clip: content-box;
    background-color: rgba(12, 34, 56, 0.6);
    /* */
    clear: left;
    color: aqua;
    display: block;
    float: right;
    justify-content: flex-end;
    position: relative;
    z-index: -2;
}

p > #foo ~ .bar {
    align-content: var(--align-content);
    align-items: var(--align-items);
    align-self: var(--align-self);
    all: var(--all);
    animation: var(--animation);
    animation-delay: var(--animation-delay);
    animation-direction: var(--animation-direction);
    animation-duration: var(--animation-duration);
    animation-iteration-count: var(--animation-iteration-count);
    animation-name: var(--animation-name);
    animation-play-state: var(--animation-play-state);
    animation-timing-function: var(--animation-timing-function);
    backface-visibility: var(--backface-visibility);
    background-attachment: var(--background-attachment);
    background-blend-mode: var(--background-blend-mode);
    background-clip: var(--background-clip);
    background-color: var(--background-color);
    /* */
    clear: var(--clear);
    color: var(--color);
    display: var(--display);
    float: var(--float);
    justify-content: var(--justify-content);
    position: var(--position);
    z-index: var(--z-index);
}