Що робить властивість transition-timing-function?

CSSJunior~1 хв читання

transition-timing-function визначає характер (криву прискорення), з яким відбувається плавний перехід: чи буде він рівномірним, сповільнюватиметься, прискорюватиметься тощо.

Основні значення:

javascript

ease        - плавне прискорення і сповільнення (типове значення)
linear      - рівномірна швидкість від початку до кінця
ease-in     - повільно на початку, швидше до кінця
ease-out    - швидко на початку, повільніше до кінця
ease-in-out - повільно на початку і в кінці, швидше в середині

Можна використовувати і кубічні криві Безьє:

javascript

transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Підсумок: властивість задає як саме буде змінюватися швидкість анімації під час переходу: рівномірно чи з прискореннями/сповільненнями.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.