0

How to combine rotational Motion of objects ?

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

15th Oct 2020, 10:14 AM
Azakios
Azakios - avatar
4 Antworten
+ 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); } }
16th Oct 2020, 6:36 AM
Josh Greig
Josh Greig - avatar
+ 1
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
16th Oct 2020, 7:30 AM
Azakios
Azakios - avatar
+ 1
Josh Greig Thank u again,i want both motions self rotatory +either side of screen
17th Oct 2020, 3:32 AM
Azakios
Azakios - avatar
0
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.
16th Oct 2020, 7:52 PM
Josh Greig
Josh Greig - avatar