CSS Animations and Transitions

1. What Are CSS Animations and Transitions?

CSS animations and transitions allow you to create dynamic effects for elements on your page. Transitions provide smooth changes between states, while keyframe animations allow for more complex sequences of transformations and styles over time.

2. Using Transitions

Transitions allow you to change property values smoothly over a specified duration. For example, you can create smooth hover effects that change an element's color or position when the user interacts with it.

Example: Hover effect with a smooth transition on the background color and rotation:

/* Apply transition */
.animated-box {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    margin: 20px auto;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* On hover, rotate and change color */
.animated-box:hover {
    transform: rotate(45deg);
    background-color: #e74c3c;
}
                

3. Using Keyframe Animations

Keyframe animations allow you to create more complex animations by defining key points of the animation sequence. You can control various properties at each step of the animation.

Example: Keyframe animation that moves and scales an element:

/* Keyframe animation */
@keyframes moveAndScale {
    0% {
        transform: translateX(0) scale(1);
        background-color: #3498db;
    }
    50% {
        transform: translateX(150px) scale(1.2);
        background-color: #2ecc71;
    }
    100% {
        transform: translateX(0) scale(1);
        background-color: #3498db;
    }
}

/* Apply keyframe animation */
.keyframe-box {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    margin: 20px auto;
    border-radius: 8px;
    animation: moveAndScale 3s ease-in-out infinite;
}
                

4. Animation Properties

There are several properties you can use to control the behavior of an animation:

• animation-duration: Specifies the duration of the animation.
• animation-timing-function: Defines the speed curve of the animation (e.g., ease, linear, ease-in).
• animation-iteration-count: Defines how many times the animation will repeat (e.g., infinite, 3).
• animation-direction: Determines whether the animation should reverse on alternate cycles.
• animation-delay: Delays the start of the animation.