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

Challenge: Adding TransitionChallenge: Adding Transition

Task

Enhance the visual experience of the div element with the class name box by adding a smooth transition effect to its hover changes. Follow these steps:

  1. Specify the correct value for the transition-property property.
  2. Set the duration of the transition to last 3000ms.
  3. Ensure that the transition starts 200ms after a user hovers over the element.
  4. Apply the time function cubic-bezier(0.165, 0.84, 0.44, 1) to control the transition's acceleration and deceleration.
html

index.html

css

index.css

js

index.js

  1. Set the transition-property property to the appropriate value that aligns with the changes you want to animate on hover.
  2. Specify the transition-duration to control how long the transition should last (in this case, 3000ms).
  3. Utilize the transition-delay property to introduce a delay before the transition starts after a user hovers over the element (set it to 200ms).
  4. Apply the cubic-bezier(0.165, 0.84, 0.44, 1) timing function to fine-tune the acceleration and deceleration of the transition.
html

index.html

css

index.css

js

index.js

Everything was clear?

Section 3. Chapter 7
course content

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

Challenge: Adding TransitionChallenge: Adding Transition

Task

Enhance the visual experience of the div element with the class name box by adding a smooth transition effect to its hover changes. Follow these steps:

  1. Specify the correct value for the transition-property property.
  2. Set the duration of the transition to last 3000ms.
  3. Ensure that the transition starts 200ms after a user hovers over the element.
  4. Apply the time function cubic-bezier(0.165, 0.84, 0.44, 1) to control the transition's acceleration and deceleration.
html

index.html

css

index.css

js

index.js

  1. Set the transition-property property to the appropriate value that aligns with the changes you want to animate on hover.
  2. Specify the transition-duration to control how long the transition should last (in this case, 3000ms).
  3. Utilize the transition-delay property to introduce a delay before the transition starts after a user hovers over the element (set it to 200ms).
  4. Apply the cubic-bezier(0.165, 0.84, 0.44, 1) timing function to fine-tune the acceleration and deceleration of the transition.
html

index.html

css

index.css

js

index.js

Everything was clear?

Section 3. Chapter 7
some-alt