Animate Xenforo Logo

[Ender]

I am trying to add the pulse to the logo in xenforo using the animate.css! Kind of clueless but trying to piece things together! Here is what I have in my EXTRA.less

I am using UiX2 and its Xenforo 2.1.0

#logoBlock
{
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
}

 

[Areeb]

Add this in extra.less,

#logoBlock
    {
        -webkit-animation-name: scalex;
        -webkit-animation-duration:3s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:ease-in-out;
        -moz-animation-name: scale;
        -moz-animation-duration:3s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:ease-in-out;
}
   
    @-webkit-keyframes scalex{
        from {-webkit-transform: scale(0.9);}
        65% {-webkit-transform: scale(1.0);}
        to {-webkit-transform: scale(0.9);}  
    }
       
    @-moz-keyframes scale{
        from {-moz-transform: scale(0.9);}
        65% {-moz-transform: scale(1.0);}
        to {-moz-transform: scale(0.9);}  
    }
       
    }

 

[Ender]

Add this in extra.less,

#logoBlock
    {
        -webkit-animation-name: scalex;
        -webkit-animation-duration:3s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:ease-in-out;
        -moz-animation-name: scale;
        -moz-animation-duration:3s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:ease-in-out;
}
  
    @-webkit-keyframes scalex{
        from {-webkit-transform: scale(0.9);}
        65% {-webkit-transform: scale(1.0);}
        to {-webkit-transform: scale(0.9);} 
    }
      
    @-moz-keyframes scale{
        from {-moz-transform: scale(0.9);}
        65% {-moz-transform: scale(1.0);}
        to {-moz-transform: scale(0.9);} 
    }
      
    }

Do I need the logo to be uploaded to the file manager because I am just using a link atm

 

[Areeb]

Do I need the logo to be uploaded to the file manager because I am just using a link atm

It shouldn't matter

 

[Ender]

It shouldn't matter

https://apricitynetwork.com

 

[Areeb]

https://apricitynetwork.com

I'm on phone so I can't see your classes sorry. If it's not fixed by the time I wake up, I'll help you.

 

[Kuchy]

1) breathing isn't an animation name on animate.css
2) If you're using animate.css, why didn't you just add the classes animated pulse to the logoBlock html tag and to loop it, add infinite to that class list. Should accomplish what you want.

Hope it works!

 

[Ender]

1) breathing isn't an animation name on animate.css
2) If you're using animate.css, why didn't you just add the classes animated pulse to the logoBlock html tag and to loop it, add infinite to that class list. Should accomplish what you want.

Hope it works!

whats the logo block html XD

 

[Kuchy]

It's the id name of the tag you're trying to add css properties to.

 

[Ender]

I'm on phone so I can't see your classes sorry. If it's not fixed by the time I wake up, I'll help you.

Any luck cause I am still lost XD

 

[Wollcreef]

Any luck cause I am still lost XD

I can help. Add me on Discord: facufer#0721