Animation Issue

  • Hi,
    Custom animation CSS does not seem to work. Below is the code I used in Custom CSS field.

    .menu-badge {
    font-size: 9px;
    margin-left: 4px;
    position: relative;
    top: -10px;
    margin-bottom: 13px;
    color: #ffffff;
    background-color: #FF0000;
    padding: 3px 4px;
    border-radius: 3px;
    }
    .badge-bounce {
    animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
    }

    Any help would be greatly appreciated. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear ibro87,

    Thanks for using the Animate It!

    It looks a conflict with some other Plugin or theme.

    Could you please post this link to the page where this issue is?

    Thread Starter ibro87

    (@ibro87)

    Hi there,

    I already tried deactivating all the plugins, that didn’t help. I think it’s more like theme conflict.
    The badge is visible from all pages and normally should be bouncing up and down but it’s static with your plugin. See here https://i.imgur.com/9CcKt1o.png
    Here is the website link as well https://wemobileapps.com/
    Thank you.

    Plugin Author eleopard

    (@eleopard)

    Dear Ibro87,

    Apologies for the delayed reply.

    Please do the following:

    1. Remove the animation class “badge-bounce”.

    2. Add the following to the existing “menu-badge” class:

    .menu-badge{
    display: inline-block;
}

    3. Now, with menu badge, add the following classes:
    animated bounce delay2 duration2 infinite

    This would make the infinite bounce animation using the existing Animation classes from Animate It!, and would more simpler as well.

    You can try more custom animations by generating them from our Class Generator:
    https://www.downloads.eleopard.in/class-generator-wordpress

    Please let me know if this works for you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Animation Issue’ is closed to new replies.