Multiple keyframe names

[toolman]

Hi,

I am trying to combine multiple keyframe names, but bot sure how to do it.

This is what I have tried, but it didn’t seem to work.

@keyframes fade-1, fade-2, fade-3

Any ideas how I can do this?

Thanks

[coothead]

Hi there toolman,

it should be done in this manner…

@keyframes fade-1 {
 
/* code goes here */

 }

@keyframes fade-2 {
 
/* code goes here */

 }

@keyframes fade-3 {
 
/* code goes here */

 }

coothead

[toolman]

Many thanks!

[coothead]

 
 
        No problem, you’re very welcome.
 
 
        coothead

[donboe]

@toolman.

I can not come up with a reason why you would like to combine multiple keyframe names, other than that you want to apply multiple animations to a single element? If that is the case, you first need to declare the animations as defined by @coothead and after that apply these animations to your element:

@keyframes fade-1 { 
/* code goes here */
 }

@keyframes fade-2 {
/* code goes here */
 }

@keyframes fade-3 { 
/* code goes here */
 }
 
.your_element {
   animation: 
      fade-1 3s, 
      fade-2 2s,
	  fade-3 1s;
}