Question 257833 in CSS Question posted in
Some basic documentation can be found here.

CSS pseudo elements translate faster than main element

I have a simple div with a before and after pseudo element. I use keyframes to transform everything along the y axis.

The pseudo elements move faster than the main element and I have no idea why.

I explicitly set the position and inset on my pseudo elements and inherited the animation.

Here is my entire source code example:

      body {
        width: 100%;
        height: 100%;
        background-color: black;
      }
      .snow {
        position: absolute;
        content: "";
        inset: 0;
        background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent);
        animation: snowAnimation 4s linear infinite;
      }

      .snow::after,
      .snow::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent);
        animation: inherit;
      }

      @keyframes snowAnimation {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(650px);
        }
      }
  <body>
    <div class="snow"></div>
  </body>
Tags:

2

Answers


  1. 0

    The pseudo elements run visibly faster, because you are simultaneously animating their parent, too! since the parent also goes down, you make the way for the pseudo element longer, but it has the same duration for the animation. Thus it has more way to go in the same amount of time. Thats why it looks faster.

    Make the animation for the pseudo elements slower, or have two elements <div>‘s next to each other without an animated parent.

    Login or Signup to reply.
  2. 0

    Pseudo elements are children of their main elements. If you translate the main element, the pseudo elements are along for the ride. Applying the same translation to an element and its pseudo-element is sort of like throwing a 60mph pitch out of a car already traveling 60mph—you’ll end up with a ball traveling 120mph.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search