// Spinning Icons
// --------------------------
/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix} 会在编译时被替换为具体的值。
   这个选择器用于设置具有特定前缀的元素的旋转动画。 */
   .#{$fa-css-prefix}-spin {
    /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 2 秒，无限循环，线性过渡。 */
    -webkit-animation: fa-spin 2s infinite linear;
    /* 标准的 CSS 动画属性，设置同样的动画效果。 */
            animation: fa-spin 2s infinite linear;
  }
  
  /* 同样使用插值语法的选择器，用于设置具有特定前缀的元素的脉冲动画。 */
  .#{$fa-css-prefix}-pulse {
    /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 1 秒，无限循环，分为 8 步过渡。 */
    -webkit-animation: fa-spin 1s infinite steps(8);
    /* 标准的 CSS 动画属性，设置同样的动画效果。 */
            animation: fa-spin 1s infinite steps(8);
  }
  
  /* 定义一个名为'fa-spin'的关键帧动画，用于在 WebKit 浏览器内核中实现旋转效果。 */
  @-webkit-keyframes fa-spin {
    /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */
    100% {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
  }
  
  /* 定义一个名为'fa-spin'的关键帧动画，用于在标准的 CSS 环境中实现旋转效果。 */
  @keyframes fa-spin {
    /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */
    100% {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
  }