Primer CSS Rotation Animation
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= </div></body> </html> |
Output:
Reference: https://primer.style/css/utilities/animations#rotation
Please Login to comment...