0

Is there any way to apply multiple animations to an element in html? I have already applied opacity animation to my text ( from 0 opacity to 1). Now I want to move that same text. How is that possible?!

Thanks

P.S: I can have multiple animations start at the same time. But I want to move my text after the first animation finishes. So I have two animations and I want the second one to have a 2s delay. But how to delay just one of them?!

Ata
  • 19
  • 1
  • 7
  • Using the property animation you can specify multiple animations. Example: `animation: rotate 1s linear, jump 3s linear, goleft 1s linear;` – Rainbow Apr 08 '20 at 14:56
  • @ZohirSalak then we need to define what rotate, jump and goleft mean using keyframes right? and we need to assign every keyframe to one animation(name) right? that's where I'm stuck. – Ata Apr 08 '20 at 15:08
  • the syntax is as follow **animation: name duration timing-function delay iteration-count direction fill-mode play-state;** Which is the short form of 8 properties. Did you try researching this at least ? – Rainbow Apr 08 '20 at 15:21
  • @Zohir Salak Yes I've researched a lot :| but apparently you don't get my question dude! What you've been saying is HOW the animation should happen. WHAT happens is defined by keyframes right?! and apparently you can't assign one keyframe to two animation names. It only reads the last name. – Ata Apr 08 '20 at 15:35
  • one animation is a set of keyframes, if you want give one animation two names copy all the keyframes and give them another name which is just redundant, Your question was *Is there any way to apply multiple animations to an element in html?* if my first comment didn't answer it then i don't really understand what you're after. – Rainbow Apr 08 '20 at 15:39
  • @Zohir Salak Problem solved. I tried percents instead of using 'from' and 'to'. But I still can't have different timing-functions for them. But it's ok. Here's my code: .text1 { font-size: 50px; color: white; opacity: 0; position: absolute; top: 50%; left: 50%; animation-name: text1; animation-duration: 4s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: linear; animation-fill-mode: forwards;} keyframes text1 { 10% {opacity: 0;top: 50%;} 50% {opacity: 1;top: 50%;} 100% {opacity: 1;top: 40%;} } – Ata Apr 08 '20 at 15:47
  • You can't have delay between keyframes at least not in a clean way, you can double up the keyframe and add more keyframes with the same values, or extend the time of the animation, related https://stackoverflow.com/questions/20499462/css-keyframe-animations-and-delay – Rainbow Apr 08 '20 at 15:55
  • @Zohir Salak Thanks for your time Zohir :) – Ata Apr 08 '20 at 15:57

0 Answers0