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

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

0 голосов
/ 04 июля 2018

Я создал анимацию, которая должна перемещать элемент сверху вниз страницы. Я создал 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/

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

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

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>
0 голосов
/ 04 июля 2018

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

...