2 separate CSS animations

APD Toronto
APD Toronto used Ask the Experts™
Hi Experts,

How can I have 2 separate animations, but animation b waits until a finishes?

if I need JS, thats ok, I am just changing RGB values.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Look at the following code. I change the font size of a <p> element. Initially the font-size goes up to 120px and then to 25px. To do this I put in the complete arg of the first animate function a second animate function. The second animate function triggers when the first complete.
<p class="lw">Hello Weaver!</p>

Open in new window

.lw { font-size: 60px; }

Open in new window


}, 2000,function(){
  $('.lw').animate({'font-size':25}, 2000);

Open in new window

The general type of animation function is this:
$('.lw').animate(properties, duration, easing, complete);
PawełI Design & Develop Software
What are these animations? what's the trigger for them? do they run continuously or just once?

You can 100% do them using JavaScript, but i would first investigate using CSS Animations or transitions



if you give me a bit more info i can probably walk you through it.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial