transition применяемый к hover

Question 1

Если к каким либо отдельным параметрам хотим применить transition

Answer 1

transition-property: transform, background;

Question 2

Как сделать задержку трансформации чтобы после действия она была позже

Answer 2

transition-delay: 2500ms, 0ms; Конкретно здесь если transition property на несколько элементов можем разделить на какой сколько будет зажержка

Question 3

Какой параметр может в себе принимать тайминговые функции анимации чтобы анимация допустим была в 2 или 10 шагах или идеально плавной и много другое.

Answer 3

transition-timing-function: steps(2, end);

Question 4

transition-timing-function: ease;

Answer 4

Это значение по умолчанию. Переход начинается медленно, затем ускоряется и снова замедляется к концу.

Question 5

ease-in

Answer 5

Переход начинается медленно, затем ускоряется. Используется для эффектов появления.

Question 6

ease-out

Answer 6

Переход начинается быстро и замедляется к концу. Используется для эффектов исчезновения.

Question 7

linear

Answer 7

Переход происходит с постоянной скоростью от начала до конца. Подходит для случаев, когда нужно сохранить равномерное движение.

Question 7

ease-in-out

Answer 7

Переход начинается медленно, затем ускоряется и снова замедляется к концу. Это более выраженный вариант ease.

Question 8

step-start

Answer 8

Переход начинается мгновенно и происходит без промежуточных значений. Можно представить как steps(1, start).

Question 8

step-end

Answer 8

Переход завершается мгновенно без промежуточных значений. Можно представить как steps(1, end).

Question 9

steps(10, start)

Answer 9

Переход состоит из 10 шагов и каждый шаг происходит в начале каждого интервала. Визуально это будет выглядеть как постепенное изменение в 10 дискретных этапов.

Question 10

steps(10, end)

Answer 10

Переход состоит из 10 шагов и каждый шаг происходит в конце каждого интервала. Визуально это будет выглядеть как постепенное изменение в 10 дискретных этапов.

Question 11

cubic-bezier(0.1, -0.3, 0.2, 0)

Answer 11

кубический безье определяет переход с кастомными значениями кривой. Первые два значения контролируют скорость перехода в начале, а последние два - в конце. В данном примере кривая начинается медленно, затем ускоряется с негативным ускорением, а затем замедляется.

Question 12

Это значение по умолчанию. Переход начинается медленно, затем ускоряется и снова замедляется к концу.

Answer 12

transition-timing-function: ease;

Question 13

Переход начинается медленно, затем ускоряется. Используется для эффектов появления.

Answer 13

ease-in

Question 14

Переход начинается быстро и замедляется к концу. Используется для эффектов исчезновения.

Answer 14

ease-out

Question 15

Переход начинается медленно, затем ускоряется и снова замедляется к концу. Это более выраженный вариант ease.

Answer 15

ease-in-out

Question 16

Переход происходит с постоянной скоростью от начала до конца. Подходит для случаев, когда нужно сохранить равномерное движение.

Answer 16

linear

Question 17

Переход начинается мгновенно и происходит без промежуточных значений. Можно представить как steps(1, start).

Answer 17

step-start

Question 18

step-end

Answer 18

Переход завершается мгновенно без промежуточных значений. Можно представить как steps(1, end).

Question 19

Переход состоит из 10 шагов и каждый шаг происходит в начале каждого интервала. Визуально это будет выглядеть как постепенное изменение в 10 дискретных этапов.

Answer 19

steps(10, start)

Question 20

Переход состоит из 10 шагов и каждый шаг происходит в конце каждого интервала. Визуально это будет выглядеть как постепенное изменение в 10 дискретных этапов.

Answer 20

steps(10, end)

Question 21

кубический безье определяет переход с кастомными значениями кривой. Первые два значения контролируют скорость перехода в начале, а последние два - в конце. В данном примере кривая начинается медленно, затем ускоряется с негативным ускорением, а затем замедляется.

Answer 21

cubic-bezier(0.1, -0.3, 0.2, 0)

Question 22

transition-duration

Answer 22

Длинна анимации

Question 23

Длинна анимации

Answer 23

transition-duration

Question 24

Порядок свойств в строке transition

Answer 24

В строке transition порядок свойств следующий: transition-property, transition-duration, transition-timing-function, и transition-delay.