HTML CSS - Custom Animations

Creating custom animations with keyframes

Custom animations with keyframes allow you to create complex and engaging visual effects in your web designs. This tutorial covers advanced techniques for creating custom animations using CSS keyframes.

Slide In Animation

The slideIn animation moves an element from the left to its original position. Here is an example:

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 1s ease-out;
}
            

Bounce Animation

The bounce animation makes an element bounce up and down. Here is an example:

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}
            

Rotate Animation

The rotate animation continuously rotates an element. Here is an example:

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 2s linear infinite;
}
            

Combining Animations

You can combine multiple animations to create complex effects. Here is an example:

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.slide-in {
    animation: slideIn 1s ease-out;
}

.bounce {
    animation: bounce 2s infinite;
}
            

Animation Timing Functions

CSS animations can use timing functions for more complex effects. Here is an example:

@keyframes easeInOutBack {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(0);
    }
}

.ease-in-out-back {
    animation: easeInOutBack 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
            

Animation Delays and Iteration Counts

CSS animations can include delays and specify iteration counts. Here is an example:

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 2s 1s forwards;
}
            

Keyframe Percentage Steps

Keyframes can be defined at specific percentage steps to create detailed animations. Here is an example:

@keyframes colorChange {
    0% {
        background-color: #3498db;
    }
    50% {
        background-color: #e74c3c;
    }
    100% {
        background-color: #3498db;
    }
}

.color-change {
    animation: colorChange 4s infinite;
}
            

Summary

In this tutorial, you learned how to create custom animations with keyframes in CSS. You explored creating animations such as slide-in, bounce, rotate, combining animations, using animation timing functions, animation delays, iteration counts, and defining keyframes at specific percentage steps. Understanding and applying these techniques will enable you to create dynamic and engaging visual effects, enhancing the interactivity and appeal of your web designs.