Fade Effect

[GSG]

http://codepen.io/gsg/pen/zxxNPv

How do you delay the removing part of the.fade class in a more elegant way? I used setTimeout method but isn’t a smooth effect.

Thanks!

[Paulie_D]

I’m thinking what you are actually after is two effects..one to fade out the existing text and another to fade it in.

What you have now, when the class is applied, is it jumping immediately to 0 opacity and then fading in.

Also, you’re changing the text as soon as the class is applied…without enough time for the fade to complete the transition to 0.

So what I think you want is start the fade out…at the point the opacity is 0 (say 50% through the cycle) change the text and then fade it back in again.

[Paulie_D]

So…we change the animation to start at 1, be 0 by 50% and then back to 1.

Add a setTimeout to the text change so it occurs halfway through the animation and increase the timeOut of the class toggle to be at the end.

http://codepen.io/Paulie-D/pen/YPPZLd

[GSG]

@Paulie_D – Thanks for your solution, definitely I will study in depth the CSS animations.

SOLVED.

[Author]

Posts