Это содержащий блок вопрос.Чтобы исправить это, вам нужно сохранить свойство transform внутри элемента, потому что transform change содержит блок элемента с абсолютным позиционированием:
* {
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 к анимации, чтобы сохранить последнее состояние и применить свойство transform:
* {
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>
Почему?
Изначально ваш элемент был расположен относительно области просмотра, поскольку нет родительского элемента с позицией, отличной отот статики.Применяя свойство transform к его родительскому элементу, измените содержащий блок, таким образом, ваш элемент позиционируется относительно него, что создает эффект прыжка, поскольку к телу применен некоторый запас по умолчанию (а также смещение полей, полученное из p)
Другими словами, вы меняете ссылку на позицию, когда вы удаляете / добавляете анимацию.
Добавляя position:relative или сохраняя transform, вы сохраняете ссылку всегда одинаковой даже послеанимация завершена.
Из документации:
Абсолютно позиционированный элемент - это элемент, вычисленное значение позиции которого является абсолютным или фиксированным.Свойства top, right, bottom и left определяют смещения от краев элемента, содержащего block . ref
И
Процесс идентификации содержащего блока полностью зависит от значения свойства position элемента:
...
Если свойство position является абсолютным, содержащий блок формируется краем поля отступа ближайшего предкаэлемент, который имеет значение позиции, отличное от статического (фиксированное, абсолютное, относительное или липкое).
- ..
Если свойство позицииявляется абсолютным или фиксированным, содержащий блок может также быть сформирован краем поля дополнения ближайшего элемента-предка, который имеет следующее:
A transform илизначение перспективы, отличное от
...
... ref