[CSS] How to change properties on different elements in one keyframe animation?

Question

In animation, what I know is that you can only animate 1 element per keyframe. Is it possible to animate multiple elements in one keyframe?

Answer 1

@Sleepy
Here you go..

https://code.sololearn.com/WYhae2wVoAOt/?ref=app

Answer 2

Mitali Can you help me with this?

Answer 3

Yes, why not?

https://code.sololearn.com/WGv6n460d8wP/?ref=app

Answer 4

Hmmm.... Interesting question! 🤔
Can't wait for an answer.

Answer 5

Calviղ That's not what I meant. What I mean is how to animate multiple elements with only ONE keyframe.

For example:
There is 2 circles:
Outer circle and Inner circle

I want to animate the outer circle to change its background. Also, I want to animate the different background of inner circle. How would I do that with only ONE keyframe? Sample:

@-webkit-keyframe change{
*How would I call the two elements to animate it here?*
}

Answer 6

can someone teach me how to code? huhuhuhuu

Answer 7

I'm not sure if you are asking is possible. In your case "change" is the animation-name, which you can use in different elements (in one or more elements). You do not call the elements inside the animation (in your case "change"). The way I understand, you create an animation then apply it to the element.
//html
<div></div>
//css
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: colorchange;
animation-duration: 1s;
-webkit-animation-name: colorchange;
-webkit-animation-duration: 1s;
}
@keyframes colorchange {
0% {background-color: red; }
50% {background-color: green; }
100% {background-color: blue; }
}
@-webkit-keyframes colorchange {
0% {background-color: red; }
50% {background-color: green; }
100% {background-color: blue; }
}