CSS Secrets: Animate Your Website Like a Pro with Just 3 Lines

Want to make your website stand out? Here’s a simple CSS animation trick that will give your elements a bounce effect in just 3 lines of code.

Add this to your next project and watch it come alive!

CSS
.element {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
Expand

Here’s a brief explanation of each part of the CSS code:

  1. .element { animation: bounce 2s infinite; }

This applies the animation to any HTML element with the class element.

bounce refers to the name of the animation (defined below).

Advertisements

2s specifies the duration of the animation (2 seconds).

infinite means the animation will loop forever.

2. @keyframes bounce { … }

This defines the keyframes for the bounce animation, specifying what happens at different stages of the animation.

3. 0%, 100% { transform: translateY(0); }

At the beginning (0%) and the end (100%) of the animation, the element remains in its original position (translateY(0)).

4.

    At the midpoint of the animation (50%), the element is moved up by 20px (translateY(-20px)), creating the “bounce” effect.

    This eye-catching, minimal CSS is perfect for engaging both novice and experienced developers!

    Leave a Comment

    Scroll to Top