animation

[Shaso]

Hi, Is it possible to add animation to the company logo in the top nav (header) area.

I tried adding code to my logo from one of the animation image options, but I’m thinking it didn’t work because there is no scrolling movement to trigger the animation.

I’d like the logo to shake when hovered over. The company is called ‘Rage’ and a shaking animation would really work well on it.

Not essential but something I’d like.

Thanks
Laurie

---

[Support]

Hello Laurie,

Yes probably that’s the reason.

You want this shake effect only one time at the first load of page, right ?

On this case you can use this HTML in the header logo:

<div class="header-logo animated shakeY">.........</div>

If you need delay the animation:

<div class="header-logo animated shakeY" style="animation-delay: 2s;">.........</div>

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Shaso]

Apologies for not replying sooner, been working on other parts of the site.

This works great. Is it possible to trigger this animation on hover or a loop with delay?

It fine as it, so no worries if it can’t be done.

Thanks

---

[Support]

Hello,

Here’s the code you need to trigger the animation on hover:

#header .header-logo:hover {
    animation-name: shakeY;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

Loop with delay is more complicated to do, especially with the shake effect. Will be needed create a custom shake animation. Here’s a link explaining how to do loop animations with delay:

CSS Keyframe Animation with Delay Between Iterations

Hope this helps!

Please try that and let us know if you need further assistance.

kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts