Понимание свойства перехода кубика-безье в CSS

У меня есть div который содержит несколько слайдов и меню.

<div id="wrap"></div>

Ниже мой CSS для div.

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

Может кто-нибудь объяснить мне, что здесь делает свойство transition? ,

Я не могу понять, какое влияние это окажет на div.

Ответ 1

Ответьте на вопрос

это свойство для анимации <div id="wrap"></div>.

Это означает, что он будет анимироваться с использованием свойства top!

И для эффекта: он будет отскок как Это будет эффект перехода

Понимание CSS кубического безье

Требуется четыре параметра:

cubic-bezier(P1x,P1y,P2x,P2y)

что они делают?

Ну, они сопоставляются с точками, и эти точки являются частью кривой Безье:

Итак, существует 4 точки, но функция только упоминает P1 и P2 с соответствующими значениями X и Y?
Для кривых CSS Безье P0 и P3 всегда находятся в одном и том же месте. P0 находится в точке (0,0), а P3 - в (1,1). Важно отметить, что точки, которые передаются в функции кубического безье, могут быть только между 0 и 1. Поэтому, если вы решите попробовать что-то вроде cubic-bezier(2,3,5,2), вы будете отправлены на линейное ослабление, худшее из всех ослаблений функции. Это похоже на семейство шрифтов, возвращающихся к Comic Sans.
Также обратите внимание, что ось x - это время, в течение которого выполняется анимация, а ось y - изменяемое свойство. Основываясь на приведенном выше графике, вы можете быстро визуализировать его в начале, замедляя посередине и увеличивая скорость в конце.

Полезные ссылки

Ответ 2

Я хотел бы дать другое объяснение функции кубического Безье кем-то, кто только что понял, как она работает. У меня были некоторые проблемы с этим во время прохождения учебников на https://freecodecamp.org. Я понял это после прочтения предыдущего ответа eirenaios и использования построителя кубического Безье.

Опубликовать в моем блоге

Кривая Безье основана на четырех точках: P0, P1, P2 и P3. По умолчанию для P0 установлено значение (0, 0), а для P3 по умолчанию установлено значение (1, 1). P0 и P3 - начало и конец кривой, и вы не можете их изменить.
Кривая будет растягиваться по-разному в зависимости от того, какие координаты вы задаете для точек P1 и P2.

Пример кубического Безье

В приведенном выше примере P1 установлен на (0,1, 0,1), а P2 установлен на (1, 0). Скорость анимации зависит от того, насколько изменяется состояние за данный промежуток времени. В этом примере анимация становится быстрее со временем. В течение первой половины времени, используемого для анимации, она будет покрывать около 15% расстояния (когда Время = 0,5, Состояние ~ 0,15). Он будет покрывать оставшиеся 85% дистанции во второй половине.

Пожалуйста, посмотрите пример в jsfiddle, чтобы увидеть, как анимация работает на практике: анимация шара кубического Безье

HTML:

<div class="ball"></div>

CSS:

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

В этом примере мяч перемещается от левого края экрана к правому краю в течение 4 секунд. Ключевые кадры предназначены для установки, где анимация должна начинаться и заканчиваться, animation-timer-function: cubic-bezier() для установки скорости анимации в разные моменты времени.