CSS Spin Animation on hover

CSS spin animations are a great way to add some visual excitement to your website or application. They can be used to draw attention to important elements on your page or to simply add some fun movement to your page.

In this blog post, we’ll be looking at how to create your own CSS spin animation on hover.

Step 1: Create the HTML Element

The first step is to create the HTML element that you want to animate. This can be anything from a simple div or span, to a complex image or video element. For this example, we’ll create a simple div with an id of “spin”.

<div id="spin"></div>

Step 2: Add the CSS

Now that we have the HTML element, we can now add the CSS to animate it. We will be using the @keyframes at-rule property and the transform:rotate() function to spin the element.

#spin:hover {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

This gives us the following example (hover over each square to see the effect):

The blue square uses @keyframe at-rule to create the spinning animation. As tor the red square, we use another technique - the transition CSS property.

.spin2 {
    transition-duration: 2s;
    transition-property: transform;
    width:5rem;
    height:5rem;
    background: red;
}
.spin2:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

As we can see, when you hover out of the transition spin animation version, the square reverses the animation. This will allow the animation to start and end smoothly, making it look more natural.

The @keyframe version abruptly stops the animation when you are not hovering over the square anymore.

Note: What are @keyframes?

@keyframe is a CSS at-rule that allows you to have more control over your CSS animations than using transitions. We can specify key points in animation (hence the name keyframes). The browser will fill out the gaps in the animation.

Historically, the term comes from cartoon animations where the lead animation will draw out the key waypoints. Then the junior animators will come in and fill out the rest.

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

Step 3: Customize the Animation

The animation we just created will spin the element 360 degrees in 1 second. You can customize the animation to fit your needs.

The animation property is a shorthand for the following animation CSS properties.

• The animation-duration parameter allows you to change the duration of the animation (in seconds or milliseconds).
• The animation-iteration-count parameter allows you to define how many times the animation should play.
• The animation-timing-function parameter allows you to define the speed curve of the animation. Possible values include:

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);


/* We can apply multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

Easing functions such as ease-in, ease-out, etc gives a more real world feel.

For more information on easing functions have a look here: https://easings.net/

Use case 1: Loading spinner

A common use for spin animations is creating loading animations. A simple way to do this is to create a circular box with the right border to be transparent:

.loader {
  width: 5rem;
  height: 5rem;
  border: 8px solid #aaa;
  border-right-color: transparent; /* make the right border */
  border-radius: 50%; /* required to create circular box */
  animation: spin 1s linear infinite; 
}

Use case 2: CSS spin text animation

A common pattern in modern/ design centric portfolio sites have circular text that spins like the below example:

In the above example, we use @keyframes to specify the spin animation. As for the circular text we use SVGs like so:

<div class="wrapper">
  <div class="animated-circle-text">
     <svg viewBox="0 0 244.1 244.1">
      <path id="circlePath" d="M226.6,122.1c0,57.7-46.8,104.5-104.5,104.5S17.6,179.8,17.6,122.1S64.4,17.6,122.1,17.6
        S226.6,64.4,226.6,122.1z" fill="transparent" />
      <text>
        <textPath  xlink:href="#circlePath">
          Spin animation - testing advanced example
        </textPath>
      </text>
    </svg>
  </div>
</div>

To get the circular text, we use the SVG tag textPath. This just allows our text to run along a path that is defined in the xlink:href attribute.

Our path is a circle and declared as :

    ...

      <path id="circlePath" d="M226.6,122.1c0,57.7-46.8,104.5-104.5,104.5S17.6,179.8,17.6,122.1S64.4,17.6,122.1,17.6
        S226.6,64.4,226.6,122.1z" fill="transparent" />
    ...
 

Don’t be intimidated by the path being non-intuitive. I just drew a circle in a vector software app and exported the path!

More information around this located here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

Browsers Support

• @Keyframes at-rule is generally supported in the majority of modern browsers.
• Keep in mind that if you are using !important, this will not work with @keyframes
• Use vendor prefixes for keyframes and transition to make sure wide support across browsers

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

/* vendor prefix for keyframes */
@-webkit-keyframes
@-moz-keyframes

Summary

Creating CSS spin animations is a great way to add some visual interest to your website or application. With just a few lines of code, you can create an eye-catching animation that will draw attention to important elements on your page. By customizing the animation and adding a transition, you can create a unique and visually appealing animation.