Element with position:absolute; jumps because of CSS-animation

user_5378943 0
Viewed 132

I have a quirk on a website I am developing. I am using absolute positioning to place H1-headings to the left side of the content. In the full code, this only happens on screen sizes larger than 1280px and the effect is much more severe than in this fiddle I made to demonstrate. As you can see, the heading "waits" until the animation is completed before it jumps into its absolute position.

How can I avoid this jump? I'd really just like it to animate into the correct position from the start. There will always be just one H1 heading with this absolute positioning per page. I'm using absolute positioning because the heading could originate from anywhere on the page. If there is a better way to do this I am all ears.

https://jsfiddle.net/v2keq3hy/5/

    * {
      font-family: Sans-serif;
    }
    
    section {
      width:1200px;
      margin:0 auto;
        -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 1s; /* Firefox < 16 */
        -o-animation: fadein 1s; /* Opera < 12.1 */
        animation: fadein 1s;
     }
      
    @keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-moz-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-webkit-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-o-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    
     article * {
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
     }
     
     article p {
      margin: 19px auto 19px auto;
     }
     
     article h1 {
      position: absolute;
      top: 150px;
      max-width: 250px;
      margin: 0 auto;
     }
<section>

  <article>

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <h1>
      Lorem Impsum
    </h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

  </article>

</section>

css-animations css html
2 Answers

It's a containing block issue. To fix it you need to keep transform property within the element, because transform change containing block of an absolute positioned element:

* {
  font-family: Sans-serif;
}

section {
  width:1200px;
  margin:0 auto;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    transform: translate(0);
 }
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


 article * {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
 }
 
 article p {
  margin: 19px auto 19px auto;
 }
 
 article h1 {
  position: absolute;
  top: 150px;
  max-width: 250px;
  margin: 0 auto;
 }
<section>

  <article>

   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
   <h1>
    Lorem Impsum
   </h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

  </article>
   
 </section>

Or add position:relative to section:

* {
  font-family: Sans-serif;
}

section {
  width:1200px;
  margin:0 auto;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    position:relative;
 }
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


 article * {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
 }
 
 article p {
  margin: 19px auto 19px auto;
 }
 
 article h1 {
  position: absolute;
  top: 150px;
  max-width: 250px;
  margin: 0 auto;
 }
<section>

  <article>

   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
   <h1>
    Lorem Impsum
   </h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

  </article>
   
 </section>

Or add forwards to the animation in order to keep the last state and keep the transform property applied:

* {
  font-family: Sans-serif;
}

section {
  width:1200px;
  margin:0 auto;
    -webkit-animation: fadein 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s forwards; /* Firefox < 16 */
    -o-animation: fadein 1s forwards; /* Opera < 12.1 */
    animation: fadein 1s forwards;
 }
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


 article * {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
 }
 
 article p {
  margin: 19px auto 19px auto;
 }
 
 article h1 {
  position: absolute;
  top: 150px;
  max-width: 250px;
  margin: 0 auto;
 }
<section>

  <article>

   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
   <h1>
    Lorem Impsum
   </h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

  </article>
   
 </section>

Why ?

Initially your element was positioned relatively to the viewport because there is no parent element with position different from static. Applying a transform property to its parent change the containing block thus your element become positioned relatively to it which create the jump effect since there is some default margin applied to the body (and also a margin collpasing coming from p)

In other words, you are changing the reference of the position when your remove/add the animation.

By Adding position:relative or by keeping the transform you keep the reference always the same even after the animation is done.

From the documentation:

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. ref

And

The process for identifying the containing block depends entirely on the value of the element's position property:

  1. ...

  2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

  3. ..

  4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:

    1. A transform or perspective value other than none

    2. ...

    3. ...ref

user_86203330

You can try adding the position: relative to section.

user_50504010
Related