html - 有位置的元素：绝对；由于 CSS 动画而跳跃

Question

我正在开发的网站上有一个怪癖。我使用绝对定位将 H1 标题放置在内容的左侧。在完整代码中，这只发生在大于 1280px 的屏幕尺寸上，并且效果比我演示的这个小提琴要严重得多。如您所见，标题“等待”直到动画完成，然后才跳入其绝对位置。

我怎样才能避免这种跳跃？我真的很希望它从一开始就动画到正确的位置。每页将始终只有一个具有此绝对定位的 H1 标题。我正在使用绝对定位，因为标题可能来自页面上的任何位置。如果有更好的方法可以做到这一点，我会全力以赴。

    * {
      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>

score 2 · Accepted Answer

这是一个包含块问题。要修复它，您需要在元素内保留 transform 属性，因为 transform 更改包含绝对定位元素的块：

* {
  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>

或添加position:relative到部分：

* {
  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>

或者添加forwards到动画中以保持最后一个状态并保持应用变换属性：

* {
  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>

为什么？

最初，您的元素相对于视口定位，因为没有位置与静态不同的父元素。将变换属性应用于其父级会更改包含块，因此您的元素相对于它定位，这会产生跳跃效果，因为有一些默认边距应用于主体（以及来自的边距折叠p）

换句话说，当您删除/添加动画时，您正在更改位置的参考。

通过添加position:relative或保持，transform即使在动画完成后，您也可以保持引用始终相同。

从文档中：

绝对定位元素是其计算位置值是绝对或固定的元素。top、right、bottom 和 left 属性指定从元素包含 块的边缘的偏移量。^参考

和

识别包含块的过程完全取决于元素位置属性的值：

...

如果位置属性是绝对的，则包含块由最近的祖先元素的填充框的边缘形成，该祖先元素的位置值不是静态的（固定的、绝对的、相对的或粘性的）。

..

如果位置属性是绝对的或固定的，则包含块也可以由最近的祖先元素的填充框的边缘形成，该元素具有以下内容：

除无以外的变换或透视值

...

...^参考

score -1 · Accepted Answer

-1

您可以尝试添加position: relativeto 部分。

于 2018-08-26T14:04:24.717 回答

html - 有位置的元素：绝对；由于 CSS 动画而跳跃

2 回答 2

Related

Reference