Может кто-нибудь сказать мне, почему положение: исправлено требуется в кубической функции Безье в CSS? - PullRequest
Новая
       77

Может кто-нибудь сказать мне, почему положение: исправлено требуется в кубической функции Безье в CSS?

0 голосов
/ 10 января 2019

Это следующий код, который имеет положение: исправлено. Если я уберу эту строку, то моя кубическая функция не просто работает. Может ли кто-нибудь сказать мне работу позиционирования таким образом. Кроме того, предложите некоторые ресурсы, чтобы лучше понять позиционирование. 

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;  
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 { 
    left: 27%;
    animation-timing-function: linear;
  }
  #ball2 { 
    left: 56%;
    animation-timing-function: ease-out;
  }

@keyframes bounce {
  0% {
    top: 0px;
  } 
  100% {
    top: 249px;
  }
} 

</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Ваша анимация изменяет свойства top и left элемента, который вы анимируете.

Эти свойства вступают в силу, только если положение элемента установлено на fixed, absolute или relative.

Удаление строки position: fixed установит позицию элемента на position: static, в результате чего свойства top и left не будут иметь никакого эффекта.

Информацию о позиционировании можно найти в https://www.w3schools.com/css/css_positioning.asp

Объясняет свойства позиционирования, которые могут быть применены к элементу, а также то, что свойства top, bottom, right и left будут делать в каждом случае.

0 голосов
/ 10 января 2019

Замените свой CSS этим, 

.balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    width: 50px;
    height: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red { 
    position: absolute;
    left: 200px;
    animation-timing-function: linear;
  }
  #blue { 
    position: absolute;
    left: 500px;
    animation-timing-function: ease-out;
  }
@keyframes bounce {
  0%{
    top:0;
  }
  100%{
    top:200px;
  }
}
  • Для того, чтобы заставить элемент двигаться, вам нужно использовать позицию CSS свойство, оно может быть относительным или абсолютным.
  • Исправлено не нужно, потому что оно фиксирует элемент на screen.So, при прокрутке вниз объект будет двигаться вдоль экрана.

Вы можете проверить это, если хотите изучить позиционирование: https://developer.mozilla.org/en-US/docs/Web/CSS/position

...