How to Create an Endless CSS Rotation Animation for Loading Icons?-CSS Tutorial-php.cn

How to Create an Endless CSS Rotation Animation for Loading Icons?

Barbara Streisand

Release： 2024-11-09 10:11:02

Original

673 people have browsed it

How to Create an Endless CSS Rotation Animation for Loading Icons?

Endless CSS Rotation Animation

Loading icons are essential for user experience, providing visual feedback during website loading. Customizing the rotation of these icons using CSS can enhance their functionality and aesthetics. However, implementing infinite rotation with CSS can prove challenging.

Consider the following example:

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

Copy after login

<div id='test' class='rotating'></div>

Copy after login

While this CSS appears intuitive, it fails to produce the intended infinite rotation for the loading icon. To achieve endless rotation, the animation must be applied using keyframes instead of transformations.

The corrected CSS using keyframes follows:

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

Copy after login

This corrected code ensures smooth and continuous rotation of the loading icon indefinitely, enhancing its functionality and visual appeal.

The above is the detailed content of How to Create an Endless CSS Rotation Animation for Loading Icons?. For more information, please follow other related articles on the PHP Chinese website!