Top 10 easy and very useful animations using CSS

Creating animations using CSS can add interactivity and visual appeal to your web projects. Here are 10 easy and very useful CSS animations that you can implement:

1. Hover Effects:

Apply hover effects to buttons, links, or images to make them change color, size, or opacity when the mouse cursor hovers over them.

Hover Effect

.button:hover {
  background-color: #0078d4;
  color: #fff;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

2. Fade In/Fade Out:

Animate elements to smoothly fade in or out when they are displayed or hidden.

Fade In Effect

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-out {
    opacity: 1;
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

3. Slide In/Slide Out:

Create a sliding effect for elements to enter or exit the screen.

Slide In Effect

.slide-in {
    transform: translateX(-100%);
    animation: slideIn 1s ease-in forwards;
}

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

    to {
        transform: translateX(0);
    }
}

.slide-out {
    transform: translateX(100%);
    animation: slideOut 1s ease-in forwards;
}

@keyframes slideOut {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

4. Spin:

Make an element spin continuously.

Spin Effect

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

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

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

5. Pulse:

Create a subtle pulsating effect for an element.

Pulse Effect

.pulse {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }

    100% {
        opacity: 1;
    }
}

6. Bounce:

Animate an element to bounce up and down.

Bounce Effect

.bounce {
  animation: bounce 1s infinite;
}

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

7. Glow:

Make text or elements glow softly.

Glow Effect

.glow {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  animation: glow 1s alternate infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  }
}

8. Shake:

Make a subtle shaking animation.

Shake Effect

.shake {
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

9. Image Zoom on Hover:

Zoom in on an image when a user hovers over it.

Image Zoom Effect

.image-zoom {
    width: 600px;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.image-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.image-zoom img:hover {
    transform: scale(1.5);
}

10. Gradient Background:

Create a colorful gradient background animation.

Gradient Background

.gradient {
    padding: 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff5733, #ff006c, #b133ff);
    background-size: 200% 100%;
    animation: gradientBg 4s linear infinite;
}

@keyframes gradientBg {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

Read More:

Mastering the Top 20 HTML Tags for web developers

How you can make animated landing page using html, css and js?

Conclusion:

Tell me in comments which one you liked most? These are the collection of animations that used in each application. You can see how they made and you can also made like that one. Thanks for reading it. Happy Coding!!

Visit my website: https://tajammalmaqbool.com