Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Selecting Transition Property | Transitions
Advanced CSS Techniques

Selecting Transition PropertySelecting Transition Property

We can specify any CSS property as a value for the transition-property property. It means that we can apply transition effect to any property.

Let's work with a couple of typical properties which are transitioned. The properties transition-duration, transition-timing-function, and transition-delay will always stay the same. All transitions will react on the cursor hover.

html

index.html

css

index.css

js

index.js

Multiple transition properties

We can also use the value all for the transition-property property, which means that all properties will be transitioned.

In the following example we would like to transition the change of background-color, color, font-weight and font-size properties. Let's check the index.css file:

html

index.html

css

index.css

js

index.js

Also, if we need to add a transition to multiple properties but not to all, we can set them as a value for the transition-property property, separating them with the help of space. For example:

It means that transition will be applied for the color, border, and height properties.

What does the transition-property property determine?

Виберіть правильну відповідь

Все було зрозуміло?

Секція 3. Розділ 2
course content

Зміст курсу

Advanced CSS Techniques

1. Introduction

Course OverviewCourse FocusCourse TopicsHow to Succeed

2. Item Positioning

What is Positioning?Relative PositioningChallenge: Relative PositioningAbsolute PositioningChallenge: Absolute PositioningFixed PositioningChallenge: Fixed PositioningSticky PositioningChallenge: Sticky PositioningStacking OrderChallenge: Stacking OrderContent Overflow

3. Transitions

What is Transition?Selecting Transition PropertyTransition DurationTransition Time FunctionTransition Time DelayTransition CombinationChallenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the AnimationControlling Animation Play Quantity and DirectionManaging Animation StateAnimation CompositionChallenge: Adding Animation

5. Transformations

What is Transformation?ScalingRotatingChallenge: Adding Scaling & RotatingTranslateSkewingPerspectiveChallenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media QueryAdaptive - Responsive layoutsInspecting the Web PageChallenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass SyntaxSass VariablesSass Numeric OperatorsSass Nesting@extend DirectiveFolder-File Structure

Advanced CSS Techniques

Selecting Transition PropertySelecting Transition Property

We can specify any CSS property as a value for the transition-property property. It means that we can apply transition effect to any property.

Let's work with a couple of typical properties which are transitioned. The properties transition-duration, transition-timing-function, and transition-delay will always stay the same. All transitions will react on the cursor hover.

html

index.html

css

index.css

js

index.js

Multiple transition properties

We can also use the value all for the transition-property property, which means that all properties will be transitioned.

In the following example we would like to transition the change of background-color, color, font-weight and font-size properties. Let's check the index.css file:

html

index.html

css

index.css

js

index.js

Also, if we need to add a transition to multiple properties but not to all, we can set them as a value for the transition-property property, separating them with the help of space. For example:

It means that transition will be applied for the color, border, and height properties.

What does the transition-property property determine?

Виберіть правильну відповідь

Все було зрозуміло?

Секція 3. Розділ 2
some-alt