CSS animations allow you to create smooth transitions between styles over a specified duration. Below, I will provide a detailed explanation of 10 different CSS animation examples.
Basic CSS Animation Concepts
Before diving into examples, here are some fundamental concepts:
- Keyframes: Define the styles at various points in the animation. Use the
@keyframesrule. - Animation Properties: Use properties like
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count, andanimation-fill-mode.
Example 1: Simple Fade In
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="fade-in">Hello, World!</div>
</body>
</html>
Example 2: Bounce Effect
<style>
.bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>
<div class="bounce">Bounce Me!</div>
Example 3: Spin Animation
<style>
.spin {
display: inline-block;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="spin">🔄</div>
Example 4: Slide In from Left
<style>
.slide-in {
position: relative;
animation: slideIn 0.5s forwards;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
</style>
<div class="slide-in">Slide In!</div>
Example 5: Pulsing Effect
<style>
.pulse {
display: inline-block;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
<div class="pulse">Pulse!</div>
Example 6: Color Change Animation
<style>
.color-change {
animation: colorChange 3s infinite;
}
@keyframes colorChange {
0% {
color: red;
}
50% {
color: blue;
}
100% {
color: green;
}
}
</style>
<div class="color-change">Color Change!</div>
Example 7: Rotate on Hover
<style>
.rotate {
display: inline-block;
transition: transform 0.5s;
}
.rotate:hover {
transform: rotate(45deg);
}
</style>
<div class="rotate">Hover Me!</div>
Example 8: Shake Animation
<style>
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
</style>
<div class="shake">Shake Me!</div>
Example 9: Zoom In Effect
<style>
.zoom-in {
animation: zoomIn 0.5s forwards;
}
@keyframes zoomIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
<div class="zoom-in">Zoom In!</div>
Example 10: Flip Animation
<style>
.flip {
display: inline-block;
perspective: 1000px;
}
.flip:active .card {
animation: flip 0.5s forwards;
}
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
.card {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
<div class="flip">
<div class="card">Flip Me!</div>
</div>
These examples show various ways to implement CSS animations, from simple fades and bounces to flips and spins. You can customize these animations further by adjusting the duration, timing functions, and keyframe properties to suit your design needs. By using CSS animations thoughtfully, you can create dynamic and engaging user experiences on your websites.
