Как «функция времени перехода: кубический-безье();» строительные работы

Question

Может кто-нибудь объяснить, как именно «функция времени перехода: кубический-безье();» работает, пожалуйста?

Вот мой код

.sample_box{ 
    background-color: orange; 
    height: 70px; 
    width: 35%; 
    transition: width 2s; 
    transition-timing-function: cubic-bezier(0.1,0.1,0.8,3.0); 
} 
.sample_box:hover{ 
    width: 100%; 
} 

• Я попытался разбить 2 секунды на 4 части, как «кубический Безье» значение, но мой ящик сошел с ума, он выходит полностью из экрана при наведении курсора в обоих направлениях

Answer 1

Вам нужно немного математики фона, чтобы действительно понять подробно о функции cubic-bezier, как эта функция определяет контрольные точки cubic-bezier curve. Я не эксперт по математике и поэтому могу лишь прояснить часть CSS. Если вам действительно нужны подробности о том, как рисовать кубическую беззерновую кривую, подождите, чтобы узнать, есть ли у вас лучший ответ здесь (или) попробуйте задать один из математических сайтов SE, в зависимости от того, что лучше подходит для вопроса.

Кривая кубического безье является кривой, нарисованной на основе четырех точек P0, P1, P2 и P3. Здесь точки P0 и P3 являются начальной и конечной точками кривой, тогда как P1 и P2 - контрольные точки, которые направлены на определение кривизны кривой.

Четыре входных значений, которые поставляются с функцией cubic-bezier синхронизации указать координаты P1 контрольных точек и P2 кубической кривой Безье (for the curve used by CSS, the points P0 and P3 are always (0,0) and (1,1) respectively). Основываясь на кривой, которая нарисована (используя входные значения), UA будут определять объем прогресса, который должен был сделать переход или анимация в любой момент времени.

В качестве specified in the W3C Specs значения для x (параметры 1 и 3) должны всегда находиться между 0 -1, тогда как значения для y (параметры 1 и 4) могут превышать этот диапазон. Ниже приведена выдержка:

Оба значения x должны находиться в диапазоне [0, 1] или определение недействительно. Значения y могут превышать этот диапазон.

Для живой демонстрации того, как кривая рисуется на основе значения входного и как это показывает прогресс в любой данный момент времени, вы можете обратиться к этой great page created by Lea Verou. Это позволяет вам изменять значения контрольных точек на графике, видеть, как изменяется кривая на нем, а также позволяет увидеть демоверсию того, как эта кривая будет работать на фактическом переходе.

Кривая, которая нарисована для cubic-bezier(0.1,0.1,0.8,3.0), будет выглядеть как this, и, как вы можете видеть, вполне нормально, что с этой кривой ширина превышает 100% до завершения перехода, а затем возвращается к 100% к концу (так как это конечное значение). Для зависания это будет обратное поведение, и, таким образом, он будет идти другим путем, прежде чем перейти к конечному значению (для вашего примера, вы не увидите его, потому что ширина не может быть ниже 0%, но вы увидите это во второй ниже.)

.sample_box { 
 
    background-color: orange; 
 
    height: 70px; 
 
    width: 35%; 
 
    transition: width 2s; 
 
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.8, 3.0); 
 
} 
 
.sample_box:hover { 
 
    width: 100%; 
 
} 
 

 
/* just for demo */ 
 

 
div.container { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid; 
 
    margin: 0px auto; 
 
} 
 

 
.sample_box_2 { 
 
    background-color: tomato; 
 
    height: 70px; 
 
    width: 35%; 
 
    transform: translate(0%, 0%); 
 
    transition: transform 2s; 
 
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.8, 3.0); 
 
} 
 
.container.second:hover .sample_box_2 { 
 
    transform: translate(100%, 100%); 
 
}

<div class='container'> 
 
    <div class='sample_box'></div> 
 
</div> 
 

 
<div class='container second'> 
 
    <div class='sample_box_2'></div> 
 
</div>