CSS Animations and Transitions

Overview

• Two primary methods for creating animations in CSS: Transitions and Animations.
  • Transitions: Activate when a property change occurs, allowing changes to take place over time.
  • Animations: Use keyframes for complex animations that do not rely on property changes.

Key Differences

Transitions

• Used for interactive property changes (e.g., on hover or focus).
• Properties change immediately without transitions unless specified.
• Ideal for simple animations.

Animations

• Provide more control through keyframes (frame by frame).
• Suitable for complex animations that do not depend on user interaction.
• Can be combined with transitions for enhanced effects.

Example Use Case

• Transitions: Boxes appear on hover.
• Animations: Rings rotate in a circle, following mouse movement for a dynamic effect.

Creating Transitions

1. Define the Component: Example button with hover effect.
   • Moves 10 pixels up on hover (immediate effect).
2. Implement Transition Properties:
   • transition-property: Defines which property to apply the transition to (e.g., transform).
   • transition-duration: Sets the duration (e.g., 0.3 seconds).
   • transition-timing-function: Defines the acceleration curve (e.g., ease, linear).
   • transition-delay: Sets delay before the transition starts (e.g., 0 seconds).
3. Shorthand Property: Use a shorthand for cleaner code (e.g., transition: transform 0.3s ease;).
4. Multiple Properties: Use all keyword if multiple properties share the same transition settings.

Creating Animations

1. Keyframes: Create keyframes to define the animation steps.
   • Syntax: @keyframes animationName { from { styles } to { styles }}.
   • Example: Slide in from the left.
2. Animation Properties:
   • animation-name: Refers to the keyframes.
   • animation-duration: Time for the animation to complete (e.g., 1 second).
   • Other properties: animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.
3. Shorthand for Animations: Combine properties into a single shorthand (e.g., animation: slide-in-left 1s ease-in both;).
4. Utility Classes: Create reusable utility classes for animations to maintain cleaner code and reusability.

Advanced Animation Techniques

• Adding more animations (e.g., slide-in-right, rotating elements).
• Creating utility classes to manage different animation timings (fast, slow, infinite).
• Using transform-origin to change the pivot point of animations (e.g., rotating from corners).

Bounce Animation Example

1. Create a bounce effect using keyframes with vertical translate transformations.
2. Use percentages for more control over the animation steps (e.g., 0%, 20%, 40%, 60%, 80%, 100%).
3. Avoid repetition by grouping keyframe properties without additional percentages when appropriate.

Conclusion

• Understanding transitions and animations in CSS allows for creating dynamic and engaging web experiences.
• Experiment with different animations and techniques to enhance user interaction and visual appeal.