Simple animation

Text rotation

CSS Animations are a great way to create visual animations. An animation is applied to an element using the "animation" property.

You must define how your animation works using keyframes. Example of an animation that rotates text:


Try Yourself
  • animation-name: spin - is the name of the animation, which we need to define separately.
  • animation-duration: 5000ms - We also tell CSS to make the animation last 500 seconds.
  • animation-timing-function: linear - perform it in a linear way
  • animation-iteration-count: infinite - and to repeat it infinitely.
  • @keyframes spin - We tell the css to rotate the text from 0 to 360 (clockwise).