Animation

Introduction

Animations:

Purpose:

Animations are more powerful and flexible, allowing for complex, multi-step animations.

1. • They are suitable for creating dynamic effects that go beyond simple property changes, such as keyframe animations.

2. Properties:

   • Animations are defined using the @keyframes rule, which allows you to specify multiple steps or keyframes for an animation.

   • You apply the animation using the animation property, specifying the animation name, duration, timing function, delay, and other options.

3. Syntax:

    @keyframes animationName {
        0% { /* styles at the beginning of the animation */ }
        50% { /* styles in the middle of the animation */ }
        100% { /* styles at the end of the animation */ }
    }
   
    element {
        animation: animationName duration timing-function delay iteration-count direction fill-mode;
    }
   

Key Differences:

1. Complexity:

   • Transitions are simpler and are best suited for basic animations and state changes.

   • Animations are more complex and provide greater control for intricate, multi-step animations.

2. Usage:

   • Transitions are commonly used for hover effects, navigation menus, and other small, interactive elements.

   • Animations are used for more elaborate, continuous animations and effects, such as loading spinners or scrolling animations.

3. Control:

   • Transitions automatically handle the transition between two states based on property changes.

   • Animations provide explicit control over each step of the animation through keyframes.

Transition vs Animation

1. Transition is used when we want to change based on a single state change

2. That state change may be when we click a button , hover over a tab

3. However in animation we can multiple state changes