Course Content

Advanced CSS Techniques

1. Introduction

Course Overview Course Focus Course Topics How to Succeed

2. Item Positioning

What is Positioning?Relative Positioning Challenge: Relative Positioning Absolute Positioning Challenge: Absolute Positioning Fixed Positioning Challenge: Fixed Positioning Sticky Positioning Challenge: Sticky Positioning Stacking Order Challenge: Stacking Order Content Overflow

3. Transitions

What is Transition?Selecting Transition Property Transition Duration Transition Time Function Transition Time Delay Transition Combination Challenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the Animation Controlling Animation Play Quantity and Direction Managing Animation State Animation Composition Challenge: Adding Animation

5. Transformations

What is Transformation?Scaling Rotating Challenge: Adding Scaling & Rotating Translate Skewing Perspective Challenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media Query Adaptive - Responsive layouts Inspecting the Web Page Challenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass Syntax Sass Variables Sass Numeric Operators Sass Nesting @extend Directive Folder-File Structure

Advanced CSS Techniques

Transition Time Delay

The transition-delay property determines the time interval before a transition animation starts. It can be utilized in creating transition sequences for various elements.

By default, the delay time is set to 0 seconds.

Let's consider the following example. When we hover over the square, the transition animation will begin in 1 second, as the transition-delay is set to 1000 milliseconds.

index.html

index.css

index.js

Everything was clear?

Section 3. Chapter 5

Course Content

Advanced CSS Techniques

1. Introduction

Course Overview Course Focus Course Topics How to Succeed

2. Item Positioning

3. Transitions

What is Transition?Selecting Transition Property Transition Duration Transition Time Function Transition Time Delay Transition Combination Challenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the Animation Controlling Animation Play Quantity and Direction Managing Animation State Animation Composition Challenge: Adding Animation

5. Transformations

What is Transformation?Scaling Rotating Challenge: Adding Scaling & Rotating Translate Skewing Perspective Challenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media Query Adaptive - Responsive layouts Inspecting the Web Page Challenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass Syntax Sass Variables Sass Numeric Operators Sass Nesting @extend Directive Folder-File Structure

Advanced CSS Techniques

Transition Time Delay

The transition-delay property determines the time interval before a transition animation starts. It can be utilized in creating transition sequences for various elements.

By default, the delay time is set to 0 seconds.

Let's consider the following example. When we hover over the square, the transition animation will begin in 1 second, as the transition-delay is set to 1000 milliseconds.

index.html

index.css

index.js

Everything was clear?

Section 3. Chapter 5