Primer CSS Rotation Animation Last Updated : 20 Apr, 2022 Comments Improve Suggest changes Like Article Like Report Primer CSS animations are generally used to get the user's attention towards the animating element and for a better user experience. In this article, we will be seeing Primer CSS Rotation Animation. To apply the rotation animation to an element, we have to add the anim-rotate class to the element. An element with rotation animation will rotate infinitely around its transform-origin coordinates, which is the center of the element in most cases. Primer CSS Rotation Animation Classes: anim-rotate: This class is used to apply rotation animation to an element. Syntax: <element class="anim-rotate"> Content... </element> Example 1: This example shows the use of the anim-rotate class to rotate a simple Primer CSS button. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Rotation Animation - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Primer CSS - Rotation Animation</h4> </div> <div class="d-flex flex-justify-center mt-10"> <button type="button" class= "anim-rotate btn-mktg btn-signup-mktg"> Rotating Button </button> </div> </body> </html> Output: Example 2: This example shows the rotation of an image by adding the anim-rotate class to it. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Rotation Animation - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green;"> GeeksforGeeks </h2> <h4>Primer CSS - Image Rotation Animation</h4> </div> <div class="d-flex flex-justify-center mt-6"> <img class="anim-rotate" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" /> </div> </body> </html> Output: Reference: https://primer.style/css/utilities/animations#rotation Comment More infoAdvertise with us Next Article Primer CSS Rotation Animation W writer01 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Toast animation in Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Pulse Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system. Animations are an important tool to attract users to 1 min read Primer CSS Scale in Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read CSS Floating Animation CSS Floating Animation creates a visual effect where elements appear to float smoothly, often mimicking natural movement like drifting in water or air. This effect is achieved using CSS properties such as @keyframes, transform, and animation, giving elements a subtle, continuous floating motion.CSS 1 min read Primer CSS Grow x Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Fade up Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Toast with Loading Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 3 min read Primer CSS Hover Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system. Animations are an important tool to attract users to 2 min read Tailwind CSS Animation This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used for animating elements with CSS animation. In CSS, we can do that by using the CSS animation property.Animation classes :animate-spin: This class is used to add a linear spin an 2 min read CSS animation-name Property The animation-name property in CSS is used for defining animations. It is used to specify the name of the @keyframes that describe the animation.Understanding the Animation-Name PropertyThe animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe the 2 min read Like