CSS переходы (CSS transition) // «Фрилансер по жизни»

Что такое CSS переходы?

CSS – переходы либо CSS – transitions могут применяться ко всем элементам и даже к псевдоэлементам. Используются для оживления нашей верстки. Что в свою очередь приводит к улучшению взаимодействия с пользователем, как правило путем приятной анимированной реакции на его действия. Например – наведение и нажатие на кнопку. Также свойства transition можно использовать для построения несложных сценариев анимации. Фактически, CSS – переходы обеспечивают смену значений других свойств с определенной анимацей и сценарием. Всю эту магию можно описать универсальным CSS свойcтвом transition, либо рядом следующих отдельных свойств:

Transition-duration

Определяет промежуток времени, в течение которого должен осуществляться переход. Собственно – тут мы указываем время за которое одно значение свойства по переходит (анимируется) в другое. Свойство не наследуется.
0sпо умолчанию
1s
500msили 0.5s
Наведи на меня

Анимация при смене значений свойств происходить не будет

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-duration: 0s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: 0s;

}

/* все то же событие */
Наведи на меня

Анимация при смене значений свойств будет происходить за 1 секунду

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-duration: 1s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: 1s;

}

/* все то же событие */
Наведи на меня

Анимация при смене значений свойств будет происходить за 500 миллисекунд

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-duration: 500ms;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: 500ms;

}

/* все то же событие */

Transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. Свойство не наследуется.
Allпо умолчанию
Имя свойства
Имена нескольких свойств
Наведи на меня

Переход будет применен ко всем свойствам поддерживающим анимацию

Шпаргалка CSS свойств, которые можно анимировать
  • -moz-outline-radius
  • -moz-outline-radius-bottomleft
  • -moz-outline-radius-bottomright
  • -moz-outline-radius-topleft
  • -moz-outline-radius-topright
  • -webkit-line-clamp
  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-color
  • all
  • backdrop-filter
  • background
  • background-color
  • background-position
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-width
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image-outset
  • border-image-slice
  • border-image-width
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-width
  • border-start-end-radius
  • border-start-start-radius
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • caret-color
  • clip
  • clip-path
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
  • columns
  • filter
  • flex
  • flex-basis
  • flex-grow
  • flex-shrink
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-variation-settings
  • font-weight
  • gap
  • grid-column-gap
  • grid-gap
  • grid-row-gap
  • grid-template-columns
  • grid-template-rows
  • height
  • inset
  • inset-block
  • inset-block-end
  • inset-block-start
  • inset-inline
  • inset-inline-end
  • inset-inline-start
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • mask
  • mask-border
  • mask-position
  • mask-size
  • max-height
  • max-lines
  • max-width
  • min-height
  • min-width
  • object-position
  • offset
  • offset-anchor
  • offset-distance
  • offset-path
  • offset-position
  • offset-rotate
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • perspective
  • perspective-origin
  • right
  • rotate
  • row-gap
  • scale
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-block-end
  • scroll-margin-block-start
  • scroll-margin-bottom
  • scroll-margin-inline
  • scroll-margin-inline-end
  • scroll-margin-inline-start
  • scroll-margin-left
  • scroll-margin-right
  • scroll-margin-top
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-block-end
  • scroll-padding-block-start
  • scroll-padding-bottom
  • scroll-padding-inline
  • scroll-padding-inline-end
  • scroll-padding-inline-start
  • scroll-padding-left
  • scroll-padding-right
  • scroll-padding-top
  • scroll-snap-coordinate
  • scroll-snap-destination
  • scrollbar-color
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • tab-size
  • text-decoration
  • text-decoration-color
  • text-decoration-thickness
  • text-emphasis
  • text-emphasis-color
  • text-indent
  • text-shadow
  • text-underline-offset
  • top
  • transform
  • transform-origin
  • translate
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom
CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s;

}

/* все то же событие */
Наведи на меня

Переход будет применен только к свойству background-color

Шпаргалка CSS свойств, которые можно анимировать
  • -moz-outline-radius
  • -moz-outline-radius-bottomleft
  • -moz-outline-radius-bottomright
  • -moz-outline-radius-topleft
  • -moz-outline-radius-topright
  • -webkit-line-clamp
  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-color
  • all
  • backdrop-filter
  • background
  • background-color
  • background-position
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-width
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image-outset
  • border-image-slice
  • border-image-width
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-width
  • border-start-end-radius
  • border-start-start-radius
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • caret-color
  • clip
  • clip-path
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
  • columns
  • filter
  • flex
  • flex-basis
  • flex-grow
  • flex-shrink
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-variation-settings
  • font-weight
  • gap
  • grid-column-gap
  • grid-gap
  • grid-row-gap
  • grid-template-columns
  • grid-template-rows
  • height
  • inset
  • inset-block
  • inset-block-end
  • inset-block-start
  • inset-inline
  • inset-inline-end
  • inset-inline-start
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • mask
  • mask-border
  • mask-position
  • mask-size
  • max-height
  • max-lines
  • max-width
  • min-height
  • min-width
  • object-position
  • offset
  • offset-anchor
  • offset-distance
  • offset-path
  • offset-position
  • offset-rotate
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • perspective
  • perspective-origin
  • right
  • rotate
  • row-gap
  • scale
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-block-end
  • scroll-margin-block-start
  • scroll-margin-bottom
  • scroll-margin-inline
  • scroll-margin-inline-end
  • scroll-margin-inline-start
  • scroll-margin-left
  • scroll-margin-right
  • scroll-margin-top
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-block-end
  • scroll-padding-block-start
  • scroll-padding-bottom
  • scroll-padding-inline
  • scroll-padding-inline-end
  • scroll-padding-inline-start
  • scroll-padding-left
  • scroll-padding-right
  • scroll-padding-top
  • scroll-snap-coordinate
  • scroll-snap-destination
  • scrollbar-color
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • tab-size
  • text-decoration
  • text-decoration-color
  • text-decoration-thickness
  • text-emphasis
  • text-emphasis-color
  • text-indent
  • text-shadow
  • text-underline-offset
  • top
  • transform
  • transform-origin
  • translate
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom
CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: background-color; transition-duration: 0.5s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: background-color 0.5s;

}

/* все то же событие */
Наведи на меня

Переход будет применен только к свойствам background-color и top

Шпаргалка CSS свойств, которые можно анимировать
  • -moz-outline-radius
  • -moz-outline-radius-bottomleft
  • -moz-outline-radius-bottomright
  • -moz-outline-radius-topleft
  • -moz-outline-radius-topright
  • -webkit-line-clamp
  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-color
  • all
  • backdrop-filter
  • background
  • background-color
  • background-position
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-width
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image-outset
  • border-image-slice
  • border-image-width
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-width
  • border-start-end-radius
  • border-start-start-radius
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • caret-color
  • clip
  • clip-path
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
  • columns
  • filter
  • flex
  • flex-basis
  • flex-grow
  • flex-shrink
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-variation-settings
  • font-weight
  • gap
  • grid-column-gap
  • grid-gap
  • grid-row-gap
  • grid-template-columns
  • grid-template-rows
  • height
  • inset
  • inset-block
  • inset-block-end
  • inset-block-start
  • inset-inline
  • inset-inline-end
  • inset-inline-start
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • mask
  • mask-border
  • mask-position
  • mask-size
  • max-height
  • max-lines
  • max-width
  • min-height
  • min-width
  • object-position
  • offset
  • offset-anchor
  • offset-distance
  • offset-path
  • offset-position
  • offset-rotate
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • perspective
  • perspective-origin
  • right
  • rotate
  • row-gap
  • scale
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-block-end
  • scroll-margin-block-start
  • scroll-margin-bottom
  • scroll-margin-inline
  • scroll-margin-inline-end
  • scroll-margin-inline-start
  • scroll-margin-left
  • scroll-margin-right
  • scroll-margin-top
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-block-end
  • scroll-padding-block-start
  • scroll-padding-bottom
  • scroll-padding-inline
  • scroll-padding-inline-end
  • scroll-padding-inline-start
  • scroll-padding-left
  • scroll-padding-right
  • scroll-padding-top
  • scroll-snap-coordinate
  • scroll-snap-destination
  • scrollbar-color
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • tab-size
  • text-decoration
  • text-decoration-color
  • text-decoration-thickness
  • text-emphasis
  • text-emphasis-color
  • text-indent
  • text-shadow
  • text-underline-offset
  • top
  • transform
  • transform-origin
  • translate
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom
CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: background-color, top; transition-duration: 0.5s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: background-color, top 0.5s;

}

/* все то же событие */

Transition-delay

Задержка выполнения перехода. Позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Время задержки перехода указывается в секундах или миллисекундах. Свойство не наследуется.
0sпо умолчанию
1s
500ms
Наведи на меня

Переход будет применен без задержки

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s 0s;

}

/* все то же событие */
Наведи на меня

Переход будет применен через одну секунду задержки

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 1s;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s 1s;

}

/* все то же событие */
Наведи на меня

Переход будет применен через 500 миллисекунд задержки

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 500ms;

}

.button_1:hover{

top: 2px; box-shadow: 0 3px 0px #3c354a; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s 500ms;

}

/* все то же событие */

Transition-timing-function

Задаёт стиль нашего перехода, то есть некий сценарий, по которому будет осуществятся анимация.
easeпо умолчанию
ease-in
ease-out
ease-in-out
linear
steps(int,start|end)
cubic-bezier(x1,y1,x2,y2)
Наведи на меня

Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease 0s;

}

/* все то же событие */
Наведи на меня

Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-in 0s;

}

/* все то же событие */
Наведи на меня

Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-out;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-out 0s;

}

/* все то же событие */
Наведи на меня

Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in-out;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-in-out 0s;

}

/* все то же событие */
Наведи на меня

Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: linear;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s linear 0s;

}

/* все то же событие */
Наведи на меня (2, start) Наведи на меня (2, end)

Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End - означало бы, что изменения нужно применять не в начале, а в конце каждого шага

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: steps(2,start);

}

.button_2{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: steps(2,end);

}

.button_1,

.button_2:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s steps(2,start) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */ transition: all 0.5s steps(2,end) 0s;

}

/* все то же событие */
Наведи на меня (0.68,-0.55,0.265,1.55) Наведи на меня (0.75, 0.99, 0.21, 0.01) Наведи на меня (0.75, -1, 0.21, -1)

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

Шпаргалка различных значений cubic-bezier
Пользовательские функции cubic Bézier с сайта easings.net
Название Значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)
CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);

}

.button_2{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.75, 0.99, 0.21, 0.01);

}

.button_3{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.75, -1, 0.21, -1);

}

.button_1,

.button_2,

.button_3:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.75, 0.99, 0.21, 0.01) 0s;

}

.button_3{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.75, -1, 0.21, -1) 0s;

}

/* все то же событие */

Значения перехода для каждого свойства

Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своими значениями перехода.
Наведи на меня

Пример применения персональных значений перехода для конкретного CSS свойства

CSS код:
/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: background-color, padding; transition-duration: 1s, 5s; transition-delay: 0.5s, 0s; transition-timing-function: ease, ease-out;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):
/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: background-color 1s ease 0.5s, padding 5s ease-out 0s;

}

/* все то же событие */

Шпаргалка является дополнением к выпуску «CSS переходы (CSS transition)»