keyframe animation

[danidls99]

Hi all,

I'm using key frames for my animation and I'm just wondering how to apply more than 1 animation to one shape. For example, I'm trying to make something appear at a certain time (I believe I would define as opacity but this is not working (?) so I guess bonus question lol) and once it has appeared, the shape would increase in length. I have both stylings for each keyframe under the tag for the shape on my css like so:

`.layer1 { animation-name: appear; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-name: elongate; animation-duration: 6s; animation-delay: 0s; animation-fill-mode: forwards; animation-iteration-count: infinite; margin: auto; top: 50%; left:50%; width: 100px; height: 25px; background: white; border-radius: 25%

}`

and this is how I defined the animation:

`@keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes elongate { 0% { transform: scaleX(.25); }

50% {

transform: scaleX(.75);

}

100% { transform: scaleX(1); }

}`

So yeah, after putting both stylings, it only showed the one called elongate but not the one called appear. But that might be because that's not the right tag. I'm really not sure.

[danidls99]

Also I'm still working on the timings and everything so disregard that

[orzubalsky]

You can't apply more than one animation-name to an element, but you can combine the styles for your keyframes in one keyframe animation:

@Keyframes combinedAnimation {
  0% {
    opacity: 0;
    transform: scaleX(.25);
  }
  50% {
    transform: scaleX(.75);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}