How To Animate Your Menu Button on Divi or Extra – Bouncing Menu Tutorial

Normally, The animation feature from Elegant Themes only works for individual pages and posts when a visual or Divi builder is enabled and dynamic elements like footer, menu don’t have this feature. On my v-tutorial, I am going to add a bouncing animation on our custom button located on menu (by the way, I’m using Extra theme).

Why You Should Consider Adding Animation On your Divi Menu?

Adding an animation on your CTA like button is a very interesting strategy to improve your user experience (UX).

Back to the scenario, make sure you define a custom css where you want to hook the animation. On my example, my class name for this is .acuity-embed-button.

Copy/Paste the code below on Extra or Divi > Theme Options > Custom CSS. You can use an animation generator like Animista.io but make to keep it dry as possible, remove those redundant codes that can hurt your CPU.

.acuity-embed-button { // Kindly rename the class accordingly.
animation: bouncing 0.5s both;
}@keyframes bouncing {
0% {
transform: translatey(-45px);
-webkit-transform: translatey(-45px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
opacity:1;
}82%{
-webkit-transform: translatey(-6px);
transform: translatey(-6px);
}90%{
-webkit-transform: translatey(-4px);
transform: translatey(-4px);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}25%, 75%, 88%, 100%{
-webkit-transform: translatey(-0px);
transform: translatey(0px);}}

Why -moz, -ms, -o and -webkit are important?

Prefixes are significance for compatibility purposes. Some search engines like IE, Opera, and Firefox cannot run your CSS if their perspective prefixes are not declared on your code.