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

Transition CombinationTransition Combination

We can combine all transition-related properties into one line.

Let's imagine we need to add a transition property to the element. We expect:

  • the change of the background-color property;
  • the time duration is 1.2s;
  • the time function must be ease-in-out;
  • the delay is 250ms.

Long form

Shorthand form

Note

There isn't any difference in syntax for the browser. We can select any option we like more.

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

Секція 3. Розділ 6
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

Transition CombinationTransition Combination

We can combine all transition-related properties into one line.

Let's imagine we need to add a transition property to the element. We expect:

  • the change of the background-color property;
  • the time duration is 1.2s;
  • the time function must be ease-in-out;
  • the delay is 250ms.

Long form

Shorthand form

Note

There isn't any difference in syntax for the browser. We can select any option we like more.

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

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