Transition property css width

CSS transition Property

Hover over a element to gradually change the width from 100px to 300px:

div <
width: 100px;
transition: width 2s;
>

More «Try it Yourself» examples below.

Definition and Usage

The transition property is a shorthand property for:

Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect.

Default value:	all 0s ease 0s
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.transition=»all 2s» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

When an gets focus, gradually change the width from 100px to 250px:

input[type=text] <
width: 100px;
transition: width .35s ease-in-out;
>

input[type=text]:focus width: 250px;
>

Источник

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

In this chapter you will learn about the following properties:

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Browser Support for Transitions

The numbers in the table specify the first browser version that fully supports the property.

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red element. The element has also specified a transition effect for the width property, with a duration of 2 seconds:

Example

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the element:

Example

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

Example

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease — specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear — specifies a transition effect with the same speed from start to end
• ease-in — specifies a transition effect with a slow start
• ease-out — specifies a transition effect with a slow end
• ease-in-out — specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) — lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Example

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1 second delay before starting:

Example

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

More Transition Examples

The CSS transition properties can be specified one by one, like this:

Example

div <
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
>

or by using the shorthand property transition :

Example

CSS Transition Properties

The following table lists all the CSS transition properties:

Property	Description
transition	A shorthand property for setting the four transition properties into a single property
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	Specifies the name of the CSS property the transition effect is for
transition-timing-function	Specifies the speed curve of the transition effect

Источник

Плавные трансформации на чистом CSS. Свойство transition

CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

Анимировать изменение цвета текста при наведении на ссылку.

Изменение размера шрифта при наведении на текст:

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

• Цветовые свойства: color , background-color , border-color и другие.
• Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
• Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
• Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
• Свойство прозрачности: opacity .
• Свойства границы: border-width , border-radius .
• Свойство позиционирования: position .

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

Если вам нужна более сложная анимация или нужно анимировать изменение свойств, которые не поддерживают переходы, вы можете использовать CSS-анимации с помощью свойств @keyframes и animation .

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

CSS transition-property Property

Hover over a element, and change the width with a smooth transition effect:

div <
transition-property: width;
>

More «Try it Yourself» examples below.

Definition and Usage

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

Default value:	all
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.transitionProperty=»width,height» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description
none	No property will get a transition effect
all	Default value. All properties will get a transition effect
property	Defines a comma separated list of CSS property names the transition effect is for
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Hover over a element, and change the width AND height with a smooth transition effect:

div <
transition-property: width, height;
>

div:hover width: 300px;
height: 300px;
>

Источник