Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Adding Animation | Animations
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 AnimationChallenge: Adding Animation

Task

Enhance the visual appeal of the authorization form by adding an animation to the "Log in" button. Follow these steps:

  1. Specify the correct value for the animation-name property, using the preset state changes defined in the @keyframes rule with the name colorChange.
  2. Set the time function to linear to ensure a consistent speed throughout the animation.
  3. Define a duration for the animation to last 6000ms.
  4. Configure the animation to repeat infinite times for a continuous effect.
html

index.html

css

index.css

js

index.js

  1. Assign the name of the @keyframes rule as the value for the animation-name property.
  2. Specify linear as the value for the animation-timing-function property to ensure a consistent speed.
  3. Set the animation-duration property to 6000ms to determine the duration of the animation.
  4. Use infinite as the value for the animation-iteration-count property to repeat the animation indefinitely.
html

index.html

css

index.css

js

index.js

Everything was clear?

Section 4. Chapter 6
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 AnimationChallenge: Adding Animation

Task

Enhance the visual appeal of the authorization form by adding an animation to the "Log in" button. Follow these steps:

  1. Specify the correct value for the animation-name property, using the preset state changes defined in the @keyframes rule with the name colorChange.
  2. Set the time function to linear to ensure a consistent speed throughout the animation.
  3. Define a duration for the animation to last 6000ms.
  4. Configure the animation to repeat infinite times for a continuous effect.
html

index.html

css

index.css

js

index.js

  1. Assign the name of the @keyframes rule as the value for the animation-name property.
  2. Specify linear as the value for the animation-timing-function property to ensure a consistent speed.
  3. Set the animation-duration property to 6000ms to determine the duration of the animation.
  4. Use infinite as the value for the animation-iteration-count property to repeat the animation indefinitely.
html

index.html

css

index.css

js

index.js

Everything was clear?

Section 4. Chapter 6
some-alt