Transitions

4.1 The transition Property

CSS transitions let you animate changes to CSS property values, creating smooth transitions between their start and end states. It's a powerful tool that enhances usability by adding dynamics to web pages. Let's dive into the key aspects of transitions, including properties, duration, and timing functions.

The transition property combines all aspects of a transition into one property. It can include:

1. Properties to be animated.
2. Animation duration.
3. Timing function.
4. Delay before the animation starts (optional).

Syntax:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Where:

• property: the property to which the transition is applied (e.g., width, height, background-color)
• duration: the transition duration (e.g., 2s for two seconds or 500ms for 500 milliseconds)
• timing-function: timing function that defines the speed changes during the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out)
• delay: delay before the transition starts (e.g., 1s for one second)

Example:

    
      
Content
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Code Explanation:

• transition: width 2s ease-in-out, background-color 1s ease: defines two transitions: one for the width property with a duration of 2 seconds and a timing function of ease-in-out, and another for the background-color property with a duration of 1 second and a timing function of ease

4.2 Transition Properties

1. The transition-property

The transition-property property defines which element properties will have transitions applied to them.

Syntax:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Example:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. The transition-duration

The transition-duration sets the duration of the transition.

Syntax:

    
      element {
        transition-duration: time;
      }
    
  

Example:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. The transition-timing-function

The transition-timing-function defines the speed curve of the animation over time.

Syntax:

    
      element {
        transition-timing-function: function;
      }
    
  

Example:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. The transition-delay

The transition-delay sets the delay before the transition starts.

Syntax:

    
      element {
        transition-delay: time;
      }
    
  

Example:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Transition Duration

The transition duration determines how long the animation of the property change will last. It's specified in seconds (s) or milliseconds (ms).

Example:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Code Explanation:

• transition: width 2s, height 1s, background-color 500ms: specifies that the transition for the width property will last 2 seconds, for height — 1 second, and for background-color — 500 milliseconds.

4.4 Timing Functions

Timing functions define how the property value changes over time. They allow you to create various animation effects.

Main timing functions:

• ease: animation starts slow, speeds up in the middle, and slows down at the end
• linear: animation moves at a constant speed from start to finish
• ease-in: animation starts slow and then speeds up
• ease-out: animation starts fast and then slows down
• ease-in-out: animation starts and ends slow, speeds up in the middle

Example:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Code Explanation:

• ease-in-out: smooth transition, starting and ending slow
• linear: transition with a constant speed
• ease: transition with a slow start and end, speeding up in the middle

1

Task

Frontend SELF EN, level 23, lesson 3

Locked

Transition Delay

Transition Delay

Open

1

Task

Frontend SELF EN, level 23, lesson 3

Locked

Complex Transitions

Complex Transitions

Open