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

Что такое CSS переходы?
CSS – переходы либо CSS – transitions могут применяться ко всем элементам и даже к псевдоэлементам. Используются для оживления нашей верстки. Что в свою очередь приводит к улучшению взаимодействия с пользователем, как правило путем приятной анимированной реакции на его действия. Например – наведение и нажатие на кнопку. Также свойства transition можно использовать для построения несложных сценариев анимации. Фактически, CSS – переходы обеспечивают смену значений других свойств с определенной анимацей и сценарием. Всю эту магию можно описать универсальным CSS свойcтвом transition, либо рядом следующих отдельных свойств:
Transition-duration
Анимация при смене значений свойств происходить не будет
.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 секунду
.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 миллисекунд
.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
Переход будет применен ко всем свойствам поддерживающим анимацию
- -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
.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
- -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
.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
- -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
.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
Переход будет применен без задержки
.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;}
/* все то же событие */Переход будет применен через одну секунду задержки
.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 миллисекунд задержки
.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
Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
.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).
.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).
.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).
.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).
.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;}
/* все то же событие */Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End - означало бы, что изменения нужно применять не в начале, а в конце каждого шага
.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;}
/* все то же событие */Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию

Название | Значение функции |
---|---|
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) |
.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 свойства
.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;}
/* все то же событие */