CSS: Transitions & Animations

CSS Transitions

CSS transitions allow you to change property values smoothly over a specified duration:

• transition-property: Specifies the property to transition (e.g., background-color, transform).
• transition-duration: Defines the duration of the transition (e.g., 0.5s, 2s).
• transition-timing-function: Specifies the speed curve of the transition (e.g., ease, linear, ease-in, ease-out, ease-in-out).
• transition-delay: Adds a delay before the transition starts.
• transition: A shorthand property for all transition values.

Example: CSS Transition

/* Example */
button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #0056b3;
}
        

This example creates a button with a smooth color transition on hover.

CSS Animations

CSS animations allow you to define keyframes for more complex animations:

• @keyframes: Defines the animation's keyframes.
• animation-name: Specifies the name of the animation.
• animation-duration: Sets the duration of the animation.
• animation-timing-function: Specifies the speed curve of the animation.
• animation-delay: Adds a delay before the animation starts.
• animation-iteration-count: Specifies the number of times the animation should run (e.g., infinite, 1, 3).
• animation-direction: Defines the direction of the animation (e.g., normal, reverse, alternate, alternate-reverse).
• animation: A shorthand property for all animation values.

Example: CSS Animation

/* Example */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
div {
    animation: fadeIn 2s ease-in-out;
}
        

This example creates a fade-in effect for a div element.

Practice

Try experimenting with transitions and animations:

• Use transition to create hover effects for links.
• Create a bouncing animation using @keyframes.
• Combine multiple animations for complex effects.

Continue Learning

• Next: CSS Pseudo-classes & Pseudo-elements