CSS переходи (CSS transition)

Ділюсь технічними навичками та уроками з HTML-верстки.

 Анімоване ім'я

Що таке CSS переходи?

CSS - переходи або CSS - transitions можуть застосовуватися до всіх елементів і навіть до псевдоелементів. Використовуються для пожвавлення нашої верстки. Що зі свого боку призводить до поліпшення взаємодії з користувачем, як правило, шляхом приємної анімованої реакції на його дії. Наприклад - наведення і натискання на кнопку. Також властивості transition можна використовувати для побудови нескладних сценаріїв анімації. Фактично, CSS - переходи забезпечують зміну значень інших властивостей з певною анімацією і сценарієм. Усю цю магію можна описати універсальною CSS властивістю transition, або низкою таких окремих властивостей:

Transition-duration

Визначає проміжок часу, протягом якого має здійснюватися перехід. Власне - тут ми вказуємо час, за який одне значення властивості переходить (анімується) в інше. Властивість не успадковується.

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

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-duration: 0s;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: 0s;

}

/* все та ж подія */

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

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-duration: 1s;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: 1s;

}

/* все та ж подія */

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

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-duration: 500ms;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: 500ms;

}

/* все та ж подія */
Transition-property

Містить назву CSS-властивостей, до яких буде застосовано ефект переходу. Значення властивості може містити як одну властивість, так і список властивостей через кому. Властивість не успадковується.

Перехід буде застосовано до всіх властивостей, що підтримують анімацію

Шпаргалка 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s;

}

.button_1:hover{

top: 5px; 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: background-color; transition-duration: 0.5s;

}

.button_1:hover{

top: 5px; 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: background-color, top; transition-duration: 0.5s;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: background-color, top 0.5s;

}

/* все та ж подія */
Transition-delay

Затримка виконання переходу. Дозволяє зробити так, щоб зміна властивості відбувалася не миттєво, а з деякою затримкою. Час затримки переходу вказується в секундах або мілісекундах. Властивість не успадковується.

Перехід буде застосовано без затримки

Шпаргалка 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s 0s;

}

/* все та ж подія */

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

Шпаргалка 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 1s;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s 1s;

}

/* все та ж подія */

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

Шпаргалка 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 500ms;

}

.button_1:hover{

top: 5px; 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).

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s ease 0s;

}

/* все та ж подія */

Перехід починається повільно, а потім плавно прискорюється в кінці. Відповідає cubic-bezier(0.42,0,0,1,1).

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s ease-in 0s;

}

/* все та ж подія */

Перехід починається швидко і плавно сповільнюється в кінці. Відповідає cubic-bezier(0,0,0.58,1).

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-out;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s ease-out 0s;

}

/* все та ж подія */

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

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in-out;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

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

}

/* все та ж подія */

Перехід відбувається рівномірно протягом усього часу, без коливань у швидкості. Відповідає cubic-bezier(0,0,1,1).

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: linear;

}

.button_1:hover{

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

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

/* всі ті самі стилі конкретної кнопки */ transition: all 0.5s linear 0s;

}

/* все та ж подія */

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

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 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 8px 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 60px; background-color: #18b5a4;

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

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

}

.button_2{

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

}

/* все та ж подія */

Дає змогу вручну встановити значення (позитивні та негативні) для кривої прискорення і створити свою власну анімацію.

Шпаргалка різних значень cubic-bezier
Cubic-bezier image
Користувацькі функції 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 код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 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 8px 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 8px 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 60px; 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) 0ss;

}

/* все та ж подія */
Значення переходу для кожної властивості

Для елемента можна задати кілька послідовних переходів, перерахувавши їх через кому. Кожен перехід можна оформити своїми значеннями переходу.

Приклад застосування персональних значень переходу для конкретної CSS властивості

CSS код:

/* загальні стилі кнопки і тексту */

.block{

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 8px 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 60px; background-color: #18b5a4;

}

Або (універсальний запис):

/* всі ті ж стилі кнопки і тексту */

.button_1{

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

}

/* все та ж подія */
ArrowПовернутися назад
Star

CSS переходи (CSS transition)

Переходи, оживи свою верстку

CSS переходи (CSS transition)

Шпаргалка є доповненням до випуску:

Logo