Animations don´t work in template

Hello everyone and Happy New Year!!

I am testing the Digital Agency template and I want to animate some parts of the Main Menu, for example, the “Get a Quote” button to blink or flash.

If I paste the code in Elementor html widget in a given page, for example, in HOME, the animation works fine . You can see this in HOME in allmydemos.net.

However, if I paste exactly the same code in the Customizer it will not work in any page, not even in the HOME.

I have tried two different animation libraries , one for the button,
and another one for the logo, and while both of them work fine from the html tag, none of them will work when placed in the Customizr. (Of course, within the Customizer/Additional CSS, I have removed the style tags: <style></style>)

I don´t think this is a matter of misswording the class because, as I say,
placing the code and the class within the Elementor html widget all animations do work. Of course, within the Customizer/Additional CSS, I have removed the style tags: <style></style> The codes I am using are the following:

<style>
    .ast-builder-button-size- {
	-webkit-animation: blink-1 0.6s infinite both;
	        animation: blink-1 0.6s infinite both;
}}
/* ----------------------------------------------
 * Generated by Animista on 2022-12-31 12:35:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.site-branding {
	-webkit-animation: blink-1 0.6s infinite both;
	        animation: blink-1 0.6s infinite both;
}}
/* ----------------------------------------------
 * Generated by Animista on 2022-12-31 12:35:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }

</style>

Also, If I want to animate only the CONTACT tab in the menu, the whole menu gets animated, as the class I could find is “a.menu-link” and this affects the rest of the menu tabs as you can see in Contact – allmydemos.net – Again, this code does not work when placed in the Customizer; it is placed with the html widget of”CONTACT” the page. Could you help me identifying the different classes of this main menu, please?

Please let me know what I´m doing wrong.

Thank you very much in advance, and Happy New Year!!

Liliana

• This topic was modified 3 years, 5 months ago by aflorarte.
• This topic was modified 3 years, 5 months ago by aflorarte.
• This topic was modified 3 years, 5 months ago by aflorarte.

The page I need help with: [log in to see the link]