На что влияет p и чему оно равно в css?

Question

[lilwings]

Вот функции отвечающие за анимацию:

'ease-in': (t, p = 1) => {
    return t ** p;
},
'ease-out': (t, p = 1) => {
    return 1 - ((1 - t) ** p);
},
'ease-in-out': (t, p = 1) => {
    if (t <= 0.5) {
        return ((t * 2) ** p) / 2;
    }

    return 1 - (1 - ((1 - (1 - t)) ** p));
}

За что отвечает p, чему она равна в css функциях?
Можете объяснить?)))

Answer 1

[Максим Морев]

В CSS функции плавности описываются не формулами, а кривой Безье.
Соответственно - ничему не равно, это просто разные сущности.
Ну или равно одному из вариантов [sine, quad, cubic, etc] буквенного обозначения, если уж прям хочется определения.

В вашем JS вы добротность (слово не совсем про это, но лучше не придумалось) воображаемой кривой регулируете с помощью параметра P (sine, quad, cubic и так далее), на CSS - только точки иначе поставить.

Вот хороший сайт-шпаргалка, с него же можно перейти на вот такой, где можно самому покрутить.

Answer 2

[SagePtr]

В ваших функциях - p используется, как показатель степени, если p = 1, то функция будет линейной, если 2 - то напоминать параболу, и т.п.