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.
![](https://dmmotionarts.com/wp-content/uploads/2023/04/DMmotionarts-Mayuresh-portfolio-image-1000x1000-1.jpg)
![PS icon PS icon](https://dmmotionarts.com/wp-content/uploads/2023/08/PS-icon.png)
![Ai icon Ai icon](https://dmmotionarts.com/wp-content/uploads/2023/08/Ai-icon.png)
![Id Id](https://dmmotionarts.com/wp-content/uploads/2023/08/Id.png)
![Lr icon Lr icon](https://dmmotionarts.com/wp-content/uploads/2023/08/Lr-icon.png)
![Pr icon Pr icon](https://dmmotionarts.com/wp-content/uploads/2023/08/Pr-icon.png)
![AE icon AE icon](https://dmmotionarts.com/wp-content/uploads/2023/08/AE-icon.png)
/* 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.