2 separate CSS animations

APD Toronto
APD Toronto used Ask the Experts™
on
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.

Thanks,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Commented:
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.
HTML
<p class="lw">Hello Weaver!</p>

Open in new window


CSS
.lw { font-size: 60px; }

Open in new window


JQuery

$('.lw').animate({
  'font-size':120
}, 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
Commented:
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

https://css-tricks.com/almanac/properties/t/transition/

https://www.w3schools.com/css/css3_animations.asp

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