CSS Transitions and Animations

1. CSS Transitions

Transitions enable you to change property values smoothly over a specified duration. This is particularly useful for hover effects and state changes.

Basic Syntax

Edit Copy

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

Example

Edit Copy

button {
    background-color: blue;
    color: white;
    transition: background-color 0.5s ease;
}

button:hover {
    background-color: green;
}

In this example, when the button is hovered over, its background color transitions smoothly from blue to green over 0.5 seconds.

2. Transition Properties

You can specify which properties should transition:

• Property: The CSS property you want to animate (e.g., background-color, transform).
• Duration: The time it takes for the transition to complete (e.g., 0.5s or 300ms).
• Timing Function: Defines the speed curve of the transition (e.g., ease, linear, ease-in, ease-out, ease-in-out).
• Delay: The time before the transition starts (optional).

3. CSS Animations

Animations allow for more complex sequences of style changes than transitions. You can define keyframes that describe the style at various points during the animation.

Basic Syntax

Edit Copy

@keyframes animation-name {
    from { /* styles at start */ }
    to { /* styles at end */ }
}

selector {
    animation: animation-name duration timing-function delay iteration-count direction;
}

Example

Edit Copy

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 2s ease-in forwards;
}

In this example, the element with the class fade-in will fade in over 2 seconds.

4. Animation Properties

Similar to transitions, you can specify various animation properties:

• Duration: Length of the animation (e.g., 2s).
• Timing Function: Determines the speed curve (same options as transitions).
• Delay: Time before the animation starts.
• Iteration Count: How many times the animation should run (e.g., infinite, 3).
• Direction: Whether the animation should play forwards, backwards, or alternate.

5. Chaining Animations

You can chain animations together using multiple @keyframes and applying them in sequence:

Edit Copy

@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

@keyframes rotate {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

.chain {
    animation: move 1s forwards, rotate 1s forwards;
}

6. Conclusion

CSS transitions and animations can significantly enhance the user experience on your website. By understanding how to implement these effects, you can create dynamic and engaging interfaces that respond to user interactions.