It's is normal to have multiple animations on an HTML element but writing them as a beginner makes the code bulky. The simplest way as we know in tech to do any big task is to break it and implement it step by step.

Consider this:

You have a div element which is a rectangle. You want to implement following animations on it:

A. Rotate 4 turns back and forth B. Reduce the size while it rotates C. Change the color of the element while it rotates D. Change the opacity of the element while it animates

It seems a lot if we do the following way:

@keyframes animation_name{
        0%{}
        25%{}
        50%{}
        100%{}
}

We can do it in a better, less cluttered way. In this we are specifying the start and end state of element and the syntax will be like this:

@keyframes animation_1{
      from{}
      to{}
}

Start by breaking down the animation names. The first scenario requires rotation of element. Name the animation as rotate_ele. Similarly name the rest animations as reduce_ele, color_ele and opacity_ele.

After naming this you can declare any CSS property you want to be part of your animation. Here is mine but you are free to explore your creativity by adding more or using completely different styles

@keyframes transform_el{
    0%{border-radius:25%; transform:scale(1.4,0.5)}
    50%{border-radius:50%; transform:scale(0.5,1.5) }
    75%{border-radius:50%; transform:scale(1.4,0.2) }
    100%{border-radius:50%; transform:scale(2.4,1) }
}

@keyframes rotate_el{
    from{transfrom:rotate(1.5turn)}
    to{transform:rotate(4.5turn)}
}

@keyframes color_el{
    0%{background-color: red}
    50%{background-color:blue}
    75%{background-color:black}
}

@keyframes opacity_el{
    0%{opacity:0.25}
    50%{opacity:1}
    100%{opacity:0.15}
}

Notice I have used both syntax for declaring my animations as per I liked.

Since we declared our animations sepatrately, we will now make the use of CSS features:

1. animation-name
2. animation-duration
3. animation-direction:alternate
4. animation-iteration-count

animation-name will let us declare all the animations one by one, separated by a comma.

animation-name: transform_el, color_el, opacity_el, rotate_el ;

animation-duration let's us separately declare the duration of time for which we want our animation to happen.

animation-duration: 0.6s,0.9s, 0.4s,0.9s;

animation-iteration-count let's us play the number of times we want our animation to happen and we can choose to run our animations different number of times. Here I have used infinite but you can use 1, 2, 0 as well.

animation-iteration-count:infinite, infinite, infinite,infinite;

animation-direction let's you choose you want the animation to be alternate or normal.

Put all these properties together to make your element animate like a saucer.

#div1 {
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
     **animation-name: transform_el, color_el, opacity_el, rotate_el ;
    animation-duration: 0.6s,0.9s, 0.4s,0.9s;
    animation-iteration-count:infinite, infinite, infinite,infinite;
    animation-direction:alternate;**
}

Try running the code in your local environment and change the values to get more hands-on CSS animation experience.

Thanks for reading.