You're tasked with creating a spinner loader animation that rotates 360 degrees indefinitely. How would you define this in the @keyframes rule?
- @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
- @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
- @keyframes rotate { 0% { transform: rotate(0deg); } 360% { transform: rotate(360deg); } }
- @keyframes rotate { from { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
To create a spinner loader animation that rotates 360 degrees indefinitely, you would define it using the @keyframes rule. The correct definition uses Option 2: @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }. This specifies a continuous rotation animation starting from 0 degrees and ending at 360 degrees, creating an infinite spinning effect.
Loading...
Related Quiz
- You want to set a global color scheme for a website using CSS variables. Where would be the best place to define these custom properties?
- You need to remove the default bullet points and apply a custom image as the bullet for each list item in an unordered list. How would you achieve this in CSS?
- In responsive design, what does the term "mobile-first" approach mean?
- How do you include a mixin in your SCSS code?
- How do you define the number of columns in a grid layout?