Элемент с положением: absolute; прыгает из-за CSS-анимации
У меня есть особенность на разрабатываемом мной веб-сайте. Я использую абсолютное позиционирование, чтобы разместить заголовки H1 в левой части содержимого. В полном коде это происходит только на экранах размером больше 1280 пикселей, и эффект гораздо более серьезен, чем в этой скрипке, которую я сделал для демонстрации. Как видите, заголовок «ждет» завершения анимации, прежде чем перейти в свое абсолютное положение.
Как я могу избежать этого скачка? Мне бы просто хотелось, чтобы он с самого начала был анимирован в правильном положении. Всегда будет только один заголовок H1 с таким абсолютным позиционированием на странице. Я использую абсолютное позиционирование, потому что заголовок может исходить из любой точки страницы. Если есть лучший способ сделать это, я все слышу.
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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
0
50
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Это проблема содержащий блок. Чтобы исправить это, вам нужно сохранить свойство преобразования внутри элемента, потому что преобразование изменяет содержащий блок элемента с абсолютным позиционированием:
* {
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, вы сохраняете ссылку всегда той же самой, даже после завершения анимации.
Из документации:
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 containingblock. ref
И
The process for identifying the containing block depends entirely on the value of the element's position property:
...
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).
- ..
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:
A transform or perspective value other than none
...
...ref
@ChrisM Я был немного быстрым и использовал неправильное слово ... это проблема с содержащим блоком, а не с контекстом стекирования, но объяснение остается тем же
—
26.08.2018 16:31
Ах я вижу. Что ж, эта ссылка по-прежнему хороша для объяснения еще одной из этих неочевидных проблем с CSS.
—
26.08.2018 16:50
Вы можете попробовать добавить position: relative в раздел.
Другие вопросы по теме
Есть ли способ изменить цвет текста меню в верхней части веб-сайта
Как сделать систему сетки с 3 столбцами одинаковой ширины, но для строк сделать автоматическую высоту?
PHP и MySQL цикл while
Прокрутка X невозможна на iOS
Задержка специфического свойства преобразования CSS
Установка курсора ввода пользовательского файла Bootstrap на указатель
Открыть / закрыть мобильное меню при нажатии другой кнопки
Включите звук при каждом новом посещении для всех, кто подключен
Как изменить размер Google noCAPTCHA reCAPTCHA
CSS @keyframes Animation: увеличение размера div не меняет «размер его поля»
Похожие вопросы
Условные поля с jQuery и семантическим пользовательским интерфейсом
Форматирование html-таблицы с помощью markupbuilder
Есть ли способ изменить цвет текста меню в верхней части веб-сайта
Получение элемента HTML
Как сделать систему сетки с 3 столбцами одинаковой ширины, но для строк сделать автоматическую высоту?
PHP и MySQL цикл while
XPath: следующий дочерний элемент родителя
Сделайте что-нибудь с элементом $ (this) через определенное время
Как я могу использовать javascript для вывода результатов из html-формы в текстовый файл на моем рабочем столе?
Beautiful Soup - Получить весь текст, но сохранить HTML-ссылку?
Красиво сделано - мне нравится объяснение. Это (контексты наложения) также часто является проблемой с Z-индексом. Я брошу эту ссылку здесь, поскольку это моя ссылка, когда я пытаюсь объяснить кому-то, кому интересно, почему все их входные данные формы появляются над выпадающими меню и т. д. philipwalton.com/articles/what-no-one-told-you-about-z-index