css3 - 图标元素动画效果2 - 动画无限循环、循环一定次数、反向动画

最新推荐文章于 2025-03-08 19:23:37 发布

erdouzhang

最新推荐文章于 2025-03-08 19:23:37 发布

阅读量2.8w

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/71402747

版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS3的`@keyframes`创建图标动画，包括无限循环、设定循环次数以及实现动画反向播放。通过设置不同的关键帧，可以控制图标在旋转过程中的变化。例如，`infinite`关键字用于让动画无限循环，而`animation-iteration-count`属性可以限制动画的执行次数，`alternate`则能让动画在偶数次执行时反向播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示

这里写图片描述

鼠标悬停，图标会一直不停旋转。
如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

图标文件引入：

<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

html：

<div class="close"><i class="fa fa-close (alias) fa-5x"></i></div>

css：

.close {
    cursor: pointer;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #96CEB4;
    position: relative;
  }
  i {
    color: #FFEEAD;
    font-size: 48px;
    position: absolute;
    top: 8%;
    left: 19%;
  }

  /*定义动画*/
  @-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/
    from { /*动画起始状态*/
      -webkit-transform: rotate(0deg);
    }
    to { /*动画结束状态*/
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .close:hover i {
    -webkit-animation: spin 1s linear infinite;/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/
    animation: spin 1s linear infinite;    
  }

解析：
keyframes：定义一个名为spin的关键帧动画。
from：指定动画的起始状态
to：指定动画的结束状态。
linear：动画匀速运动
infinite：表示动画无限循环

如果想让动画执行2次：

.close:hover i {
    -webkit-animation: spin 1s linear 2;/*2代表动画执行2次*/
    animation: spin 1s linear 2;    
  }

如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）：

.close:hover i {
    -webkit-animation: spin 1s linear 2s 2; /*2s代表延迟2秒 2代表动画执行2次*/
    animation: spin 1s linear 2s 2;    
  }

还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）：

.close:hover i {
    -webkit-animation: spin 1s linear 2s 2 alternate; /*2s代表延迟2秒 2代表动画执行2次*/
    animation: spin 1s linear 2s 2 alternate;    
  }