How to combine rotational Motion of objects ?

Question

My Object Anime
https://code.sololearn.com/Wd9ISL5fRm0s/?ref=app

Answer 1

Can you rephrase the question?

The code you linked to has some rotation animations that work. What do you mean by combine rotational motion?

Probably unrelated to your question, you have lots you can clean up in your code. You could move your animations to the top of your CSS and you can remove all the copies you have of them. Only 1 definition is needed even if you reference them many times.
@keyframes gradientAnim{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes rotation{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(900000deg);
}
}

Answer 2

Jo regardssh Greig Thanks for your response .by combination i mean how to combine those separate objects to move together either up down left right whatsoever excluding their rotational motion (i.e,creating dynamic motion both self rotatory and kinetically left right or vice versa .Hope u got it

Answer 3

Josh Greig Thank u again,i want both motions self rotatory +either side of screen

Answer 4

Azakios, if you want to animate a translation up, down, left, right instead of a rotation, you could do something like this.

Wrap all the elements you want to move around with a div. Set the div's class"translating-area". Add the following to your CSS.

@keyframes translation_animation {
0% {
top: 0;
left: 0;
}

40% {
top: 150px;
left: 0;
}

60% {
top: 100px;
left: 50px;
}
}

.translating-area {
position: relative;
animation: translation_animation 3.0s infinite linear;
}

The transform property you use for rotation also has a translate function to do the same as above.

Remember to fix the duplicated code mentioned in my previous answer. You still have a missing } in your rotation keyframes CSS that could cause later CSS to not work.