Free Mod How to add bouncing animation to any element on a Web page

[glennrocksvb]

To add bouncing animation to any element on a Web page, you'll add this animation CSS property to any CSS rule that targets one or more elements that you want to have the bouncing animation.

Add this inside a CSS rule for the target element(s): (see sample usages section)

animation: bounce 2.5s ease-out;

Then add this bounce animation CSS code itself: (add it only once)

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(-100%)
    }

    5% {
        -webkit-transform: translateY(-100%)
    }

    15% {
        -webkit-transform: translateY(0);
        padding: 4px auto
    }

    20% {
        -webkit-transform: translateY(-80%)
    }

    25% {
        -webkit-transform: translateY(0%);
        padding: 4px auto
    }

    30% {
        -webkit-transform: translateY(-70%)
    }

    35% {
        -webkit-transform: translateY(0%);
        padding: 5px auto
    }

    40% {
        -webkit-transform: translateY(-60%)
    }

    45% {
        -webkit-transform: translateY(0%);
        padding: 5px auto
    }

    50% {
        -webkit-transform: translateY(-50%)
    }

    55% {
        -webkit-transform: translateY(0%);
        padding: 6px auto
    }

    60% {
        -webkit-transform: translateY(-30%)
    }

    65% {
        -webkit-transform: translateY(0%);
        padding: 6px auto
    }

    70% {
        -webkit-transform: translateY(-15%)
    }

    75% {
        -webkit-transform: translateY(0);
        padding: 8px auto
    }

    80% {
        -webkit-transform: translateY(-10%)
    }

    85% {
        -webkit-transform: translateY(0);
        padding: 8px auto
    }

    90% {
        -webkit-transform: translateY(-5%)
    }

    95% {
        -webkit-transform: translateY(0);
        padding: 10px
    }

    100% {
        -webkit-transform: translateY(0);
        padding: 10px
    }
}

@keyframes bounce {
    0% {
        transform: translateY(-200%)
    }

    5% {
        transform: translateY(-200%)
    }

    15% {
        transform: translateY(0);
        padding-bottom: 5px
    }

    30% {
        transform: translateY(-50%)
    }

    40% {
        transform: translateY(0%);
        padding-bottom: 6px
    }

    50% {
        transform: translateY(-30%)
    }

    70% {
        transform: translateY(0%);
        padding-bottom: 7px
    }

    80% {
        transform: translateY(-15%)
    }

    90% {
        transform: translateY(0%);
        padding-bottom: 8px
    }

    95% {
        transform: translateY(-7%)
    }

    97% {
        transform: translateY(0%);
        padding-bottom: 9px
    }

    99% {
        transform: translateY(-3%)
    }

    100% {
        transform: translateY(0);
        padding-bottom: 9px
    }
}

You can add these CSS code to any website not just vBulletin. But for vBulletin, you'll add it to the css_additional template or the corresponding CSS additional template.

Sample usages in vBulletin:

1. Sticky Default Notice in:
   
   

   https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-template-only-modifications/6697-sticky-default-guest-notice

   
   
   Add it inside the code like this:
   

   	.l-desktop .notice[data-notice-id='1'] {
   	   /* ...existing code here */
   	   animation: bounce 2.5s ease-out;
   	}

2. Site Logo:
   

   	.site-logo img {
   	   animation: bounce 2.5s ease-out;
   	}

You can use it to any element you want to have bouncing animation. I can help you add it to an element that's not listed in the above sample usages.

Demo:
Navigate to any page on this site while logged out. See the bouncing sticky default Guest notice.

This modification is offered free of charge, but if you find it useful, please consider making a donation to support our continued development of high-quality mods.

[alexan1252]

thank you so much