Introduction to CSS Transitions and Animations

CSS transitions and animations bring web pages to life by adding smooth, dynamic effects to elements. Transitions create gradual changes between states, while animations allow complex, multi-step motion sequences, enhancing user engagement and interactivity.

• Purpose: Improve user experience with visual feedback and motion.
• Role in CSS: Provide lightweight, performant alternatives to JavaScript animations.

CSS Transitions

Transitions enable smooth changes in CSS properties over a specified duration when triggered by events like hover or state changes.

• Key Properties:
  • transition-property: Specifies the CSS property to transition (e.g., color, width, all).
  • transition-duration: Sets the duration (e.g., 0.3s, 500ms).
  • transition-timing-function: Defines the speed curve (e.g., ease, linear, ease-in-out).
  • transition-delay: Delays the start (e.g., 0.2s).
  • transition: Shorthand (e.g., transition: width 0.5s ease 0.1s).

Example: Hover transition:

<style>
    .box {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 0.3s ease;
    }
    .box:hover {
        width: 200px;
    }
</style>
<div class="box"></div>

<style>
    .box {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 0.3s ease;
    }
    .box:hover {
        width: 200px;
    }
</style>
<div class="box"></div>

Multiple Transitions

Apply transitions to multiple properties by listing them in the transition shorthand or using all.

Example: Multiple property transitions:

<style>
    .card {
        padding: 10px;
        background: lightgray;
        transition: background 0.4s ease, transform 0.3s ease-out;
    }
    .card:hover {
        background: lightblue;
        transform: scale(1.1);
    }
</style>
<div class="card">Hover me</div>

<style>
    .card {
        padding: 10px;
        background: lightgray;
        transition: background 0.4s ease, transform 0.3s ease-out;
    }
    .card:hover {
        background: lightblue;
        transform: scale(1.1);
    }
</style>
<div class="card">Hover me</div>

CSS Animations

Animations allow complex, keyframe-based sequences, independent of user interaction.

• Key Properties:
  • animation-name: Refers to a @keyframes rule.
  • animation-duration: Sets the duration (e.g., 2s).
  • animation-timing-function: Speed curve (e.g., ease, linear).
  • animation-delay: Delays the start (e.g., 1s).
  • animation-iteration-count: Number of repetitions (e.g., infinite, 3).
  • animation-direction: Playback direction (e.g., normal, reverse, alternate).
  • animation-fill-mode: State before/after animation (e.g., forwards, both).
  • animation: Shorthand (e.g., animation: slide 2s ease infinite).
• @keyframes: Defines the animation steps (e.g., from, to, or percentages).

Example: Keyframe animation:

<style>
    .ball {
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 50%;
        animation: bounce 1s infinite alternate;
    }
    @keyframes bounce {
        from { transform: translateY(0); }
        to { transform: translateY(100px); }
    }
</style>
<div class="ball"></div>

<style>
    .ball {
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 50%;
        animation: bounce 1s infinite alternate;
    }
    @keyframes bounce {
        from { transform: translateY(0); }
        to { transform: translateY(100px); }
    }
</style>
<div class="ball"></div>

Complex Animations

Use multiple keyframes for detailed control over animation stages.

Example: Multi-step animation:

<style>
    .spinner {
        width: 60px;
        height: 60px;
        background: purple;
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        50% { background: yellow; }
        100% { transform: rotate(360deg); }
    }
</style>
<div class="spinner"></div>

<style>
    .spinner {
        width: 60px;
        height: 60px;
        background: purple;
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        50% { background: yellow; }
        100% { transform: rotate(360deg); }
    }
</style>
<div class="spinner"></div>

Combining Transitions and Animations

Transitions and animations can be used together for layered effects, such as a constant animation with a hover-triggered transition.

Example: Combined effects:

<style>
    .icon {
        font-size: 40px;
        color: green;
        animation: pulse 2s infinite;
        transition: color 0.3s ease;
    }
    .icon:hover {
        color: orange;
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
</style>
<div class="icon">★</div>

<style>
    .icon {
        font-size: 40px;
        color: green;
        animation: pulse 2s infinite;
        transition: color 0.3s ease;
    }
    .icon:hover {
        color: orange;
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
</style>
<div class="icon">★</div>

Best Practices for Transitions and Animations

• Performance: Use transform and opacity for animations, as they are GPU-accelerated.
• Accessibility: Avoid excessive motion; use prefers-reduced-motion media query.
• Simplicity: Keep animations subtle to avoid overwhelming users.
• Consistency: Use timing and easing functions that align with your design.
• Testing: Ensure animations work smoothly across browsers and devices.

Example: Accessible animation with reduced motion:

<style>
    .button {
        background: teal;
        padding: 10px;
        color: white;
        transition: background 0.3s ease;
        animation: glow 1.5s infinite alternate;
    }
    @keyframes glow {
        to { box-shadow: 0 0 10px teal; }
    }
    @media (prefers-reduced-motion: reduce) {
        .button { animation: none; }
    }
</style>
<button class="button">Click Me</button>

<style>
    .button {
        background: teal;
        padding: 10px;
        color: white;
        transition: background 0.3s ease;
        animation: glow 1.5s infinite alternate;
    }
    @keyframes glow {
        to { box-shadow: 0 0 10px teal; }
    }
    @media (prefers-reduced-motion: reduce) {
        .button { animation: none; }
    }
</style>
<button class="button">Click Me</button>

Hands-On Activity

Create an HTML page with an external CSS file that:

• Uses a transition to change a div’s background and size on hover.
• Applies a keyframe animation to make a circle move horizontally.
• Combines a transition and animation on a button for hover color change and constant scaling.

Sample Solution:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">Hover Box</div>
    <div class="circle"></div>
    <button class="btn">Animated Button</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">Hover Box</div>
    <div class="circle"></div>
    <button class="btn">Animated Button</button>
</body>
</html>

/* styles.css */
.box {
    width: 100px;
    height: 100px;
    background: lightcoral;
    transition: width 0.4s ease, background 0.3s ease;
}
.box:hover {
    width: 150px;
    background: lightgreen;
}
.circle {
    width: 50px;
    height: 50px;
    background: blue;
    border-radius: 50%;
    animation: slide 2s infinite alternate;
}
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}
.btn {
    padding: 10px;
    background: purple;
    color: white;
    border: none;
    animation: scale 1s infinite alternate;
    transition: background 0.3s ease;
}
.btn:hover {
    background: orange;
}
@keyframes scale {
    to { transform: scale(1.1); }
}

/* styles.css */
.box {
    width: 100px;
    height: 100px;
    background: lightcoral;
    transition: width 0.4s ease, background 0.3s ease;
}
.box:hover {
    width: 150px;
    background: lightgreen;
}
.circle {
    width: 50px;
    height: 50px;
    background: blue;
    border-radius: 50%;
    animation: slide 2s infinite alternate;
}
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}
.btn {
    padding: 10px;
    background: purple;
    color: white;
    border: none;
    animation: scale 1s infinite alternate;
    transition: background 0.3s ease;
}
.btn:hover {
    background: orange;
}
@keyframes scale {
    to { transform: scale(1.1); }
}