Unwanted delay effect

Asked

Viewed 53 times

1

Problem: Desktop menu animation and soon lagged (+ or - 3s), but the mobile menu icon works as expected

Attempts:

transition-delay: 0s;
transition-delay: none;
animation-delay: 0s;
animation-delay: none;

I also tried with !important

Code: http://commandinvest.com is a template I picked up on the internet Cube

javascript html css animation

  • Guilherme which animation more precisely? This logo and text "Safety and profitability" that is rises the image at the beginning of the page?

  • @hugocsl the animation of the menu size, which decreases when scrolling the page down

1 answer

1


Your problem is in this class in the file css.css It’s affecting some elements within your .gtco-nav 

* {
    transition: 0.5s !important;
    transition-timing-function: linear !important;
}

That one transition: 0.5s !important is doing this "delay" in the transition. If you put 0s in place of 0.5s, you will see that it solves. However how is the universal selector * you will have to see the best way around this so as not to lose the effect where you do not want.

OBS: The selector * has a really bad performance time so it should look like more than 0.5s, this is the worst selector when CSS has to read the whole file to put the class. Law more here http://gabsferreira.com/eficiencia-dos-seletores-css/

  • I withdrew and it worked at the right time. But the transition does not serve to make the effect smooth?

  • It’s like this, actually it’s the time that the animation will take to go from 0 to 100% (it’s the time it takes to go from start to finish). I don’t know for sure because it’s affecting it that way, but there may be other elements interacting with it. And the " * " selector impairs performance. Note that in your style.css you have several elements with Transition, everyone inside the navbar may be interfering with that delay...

  • I took the effect of * and put only in the places I want, but the imgem (logo) still gets this delay in relation to the other items on the menu, have some hint?

  • Yes todos os seus <a>` including what surrounds the logo, and the logo image are still with Transition...

Browser other questions tagged javascript html css animation

You are not signed in. Login or sign up in order to post.