CSS-анимация, примененная к нескольким элементам, приводит к разнице в скорости анимации

Я создал анимацию, которая должна перемещать элемент сверху вниз страницы. Я создал 4 объекта и применил к ним анимацию. К моему удивлению, они движутся с разной скоростью. Я немного запутался. Что происходит?

body {
  background-color: rgb(12, 12, 13)
}

#container {
  width: 100%;
  height: 100%;
}

.object {
  background-color: rgb(255, 255, 255);
  width: 3px;
  height: 3px;
}

.slider {
  animation: 10s linear infinite slide;
}

@keyframes slide {
  from {
    margin-top: 0%
  }
  to {
    margin-top: 100%;
  }
}

<body>
  <div id = "container">
    <div class = "object slider"></div>
    <div class = "object slider" style = "margin-left:30%"></div>
    <div class = "object slider" style = "margin-left:60%"></div>
    <div class = "object slider" style = "margin-left:90%"></div>
  </div>

https://jsfiddle.net/on6t18hy/1/

Я думаю, это как-то связано со встроенным полем и характером block div - jsfiddle.net/df4xjnc7/3

— 04.07.2018 18:29

html css css-animations

04.07.2018 18:23

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

141

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Когда вы осматриваете «контейнер» и каждый «объект». Вы видите, что поля увеличиваются друг друга. Таким образом, первый имеет "нормальный" запас, второй - 2-кратный "нормальный" и так далее. Когда вы позиционируете «объект» абсолютным, этого больше не будет.

04.07.2018 18:34

Ответ принят как подходящий

Ваши элементы являются блочными, поэтому они просто находятся друг над другом и каждый на новой строке. Мы не видим этого четко, потому что они очень маленькие, но если вы увеличите их размер, это будет тривиально:

body {
  background-color: rgb(12, 12, 13)
}

#container {
  width: 100%;
  height: 100%;
}

.object {
  background-color: rgb(255, 255, 255);
  width: 30px;
  height: 30px;
}

.slider {
  /*animation: 10s linear infinite slide;*/
}

@keyframes slide {
  from {
    margin-top: 0%
  }
  to {
    margin-top: 100%;
  }
}

<body>
  <div id = "container">
    <div class = "object slider"></div>
    <div class = "object slider" style = "margin-left:30%"></div>
    <div class = "object slider" style = "margin-left:60%"></div>
    <div class = "object slider" style = "margin-left:90%"></div>
  </div>

Вы можете ясно видеть, что каждый из них находится на линии, и увеличение верхнего края первой строки подтолкнет другие строки и так далее.

Добавьте анимацию только к первой, и вы увидите, что происходит. Затем добавьте к остальным, и вы поймете:

body {
  background-color: rgb(12, 12, 13)
}

#container {
  width: 100%;
  height: 100%;
}

.object {
  background-color: rgb(255, 255, 255);
  width: 30px;
  height: 30px;
}

.slider {
  animation: 10s linear infinite slide;
}

@keyframes slide {
  from {
    margin-top: 0%
  }
  to {
    margin-top: 100%;
  }
}

<body>
  <div id = "container">
    <div class = "object slider"></div>
    <div class = "object " style = "margin-left:30%"></div>
    <div class = "object " style = "margin-left:60%"></div>
    <div class = "object " style = "margin-left:90%"></div>
  </div>

04.07.2018 21:39

Другие вопросы по теме

Как я могу заставить работать дочерний элемент в моей CSS-сетке?

Мимическое текстовое поле в div

Перекрывающиеся строки в таблице HTML

Реализация css горизонтальной шкалы времени

Отдельная кнопка: активна от parentDiv: активна

Переопределить element.style в Wordpress (CSS)

Bootstrap CSS - получение текста в одну строку в контейнере сетки

Почему мой собственный фрагмент css не работает?

Содержимое кнопки Angular Material не выровнено

Предотвращение растяжения блока в flexbox в IE

CSS-анимация, примененная к нескольким элементам, приводит к разнице в скорости анимации

Ответы 2

Другие вопросы по теме

Похожие вопросы