Make anything orbit in circle with CSS & Elementor

The below CSS allows you to move element with class “ps” in a circle (change it to your elements CSS class). Just make sure the translateX and translateY for 0% and 100% are the same so that the first point and end point are the same.
All elements need to have absolute position with (top:0, left:0, right:0, bottom:0) in a container. The CSS code will work for any site builder you use.

				
					/* Animation for DM1, change .ps to your elements CSS class */
.ps{
    animation: DM1 15s linear infinite; /* Animation name is DM1 */
}

@-webkit-keyframes DM1 { /* Animation name is DM1 */
    0% {
        transform: rotate(0deg) translateX(-300px) translateY(0px) rotate(0deg); /* Desktop translation values  */
    }

    100% {
        transform: rotate(360deg) translateX(-300px) translateY(0px) rotate(-360deg); /* Desktop translation values */
    }
}

/* For tablets (up to 1024px) */
@media (max-width: 1024px) {
    .ps{
        animation: DM1-tablet 30s linear infinite; /* Animation name is DM1-tablet */
    }

  }  @-webkit-keyframes DM1-tablet { /* Animation name is DM1-tablet */
        0% {
            transform: rotate(0deg) translateX(-225px) translateY(0px) rotate(0deg); /* Tablet translation values */
        }

        100% {
            transform: rotate(360deg) translateX(-225px) translateY(0px) rotate(-360deg); /* Tablet translation values */
        }
    }


/* For mobile devices (up to 767px) */
@media (max-width: 767px) {
    .ps{
        animation: DM1-mobile 30s linear infinite; /* Animation name is DM1-mobile */
    }

  }  @-webkit-keyframes DM1-mobile { /* Animation name is DM1-mobile */
        0% {
            transform: rotate(0deg) translateX(-120px) translateY(0px) rotate(0deg); /* Mobile translation values */
        }

        100% {
            transform: rotate(360deg) translateX(-120px) translateY(0px) rotate(-360deg); /* Mobile translation values*/
        }
    }

				
					/*Pauses animation when hovered*/
.ps:hover
{
    animation-play-state: paused;
}

Code explanation with ChatGPT

Code Overview: The provided code snippet showcases a CSS animation named “DM1” applied to elements with a specific CSS class, represented as “.ps.” The animation includes different translation values and is made responsive using media queries to adapt to various device screen sizes.

Animation for Desktop:
- The initial animation is defined for desktop devices without any media query.
- The animation is set to last for 15 seconds, follow a linear timing function, and repeat infinitely.
- The animation uses keyframes defined with @-webkit-keyframes DM1, where two keyframes specify the animation’s behavior from 0% to 100%.
- Inside the keyframes, the transform property is used to create a rotation and translation effect. The element starts with a translation of -300px on the X-axis (left) and 0px on the Y-axis (top), then completes a full rotation.
Tablet Animation (Up to 1024px):
- For tablets, a media query is introduced with a maximum width of 1024 pixels.
- Inside the media query, the animation is updated with different keyframes named “DM1-tablet.”
- These keyframes change the translation values to -225px on the X-axis, creating a different animation effect suitable for tablet-sized screens.
Mobile Animation (Up to 767px):
- Another media query is defined for mobile devices with a maximum width of 767 pixels.
- Within this media query, the animation is further adjusted with keyframes named “DM1-mobile.”
- The translation values are set to -120px on the X-axis, creating a distinct animation suitable for smaller mobile screens.

Responsive Animation: By utilizing media queries, the provided code ensures that the animation adjusts itself based on the user’s device screen size. This results in a seamless and responsive user experience, where elements with the “.ps” class will display different animations on desktop, tablet, and mobile devices.

Conclusion: Creating responsive animations in CSS using media queries is an effective way to tailor your website’s visual effects to different device screen sizes. This approach allows you to provide a consistent and engaging user experience across a wide range of devices, enhancing the overall appeal and functionality of your web design.