使用相同的类停止悬停 1 object 时的所有动画

Question

好吧，我的问题在标题中。我需要通过将鼠标悬停在 main-section__* 之一来停止所有@keyframes 的帮助。我已经筋疲力尽了，我必须在几个小时后去学习，我在这段代码后面度过了整整一个晚上。请帮助我:(((.

（如何 post 它，我必须描述多少细节才能 post 在网站上）。

在这种情况下，main-section__title 本身就是站点的标题，接下来的 8 个 div 看起来像带有主题图标的圆圈。

在我的任何一种方法中，我所能达到的最大结果是仅在 8 个圆圈中的一个圆圈上停止动画。

HTML:

<div class="main-section">
        <div class="container">
            <div class="main-section__title">Resume</div>
            <div class="main-section__about-me anim-stop"><i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__skills anim-stop"><i class="fa fa-cogs fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__contacts anim-stop"><i class="fa fa-phone fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__languages anim-stop"><i class="fa fa-language fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__working-exp anim-stop"><i class="fa fa-briefcase fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__courses anim-stop"><i class="fa fa-certificate fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__post anim-stop"><i class="fa fa-map-marker fa-5x" aria-hidden="true"></i></div>
            <div class="main-section__education anim-stop"><i class="fa fa-graduation-cap fa-5x" aria-hidden="true"></i></div>
        </div>
    </div>

SCSS:

.main-section {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #bde0fe, $alpha: 0.2);
  &__title {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a2d2ff;
  }
  &__about-me {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-250px);
    animation: 30s linear 0s infinite normal $animation-play main-section-about-me;
    @keyframes main-section-about-me {
      0% {
        transform: rotate(0deg) translateY(-250px);
      }
      100% {
        transform: rotate(360deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 20.5%;
      left: 21%;
    }
    &:hover {
      @for $elem from 1 through 10 {
        .anim-stop:nth-child(#{$elem}) {
          animation-play-state: paused;
        }
      }
    }
  }
  &__skills {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(45deg) translateY(-250px);
    animation: 30s linear 0s infinite normal $animation-play main-section-skills;
    @keyframes main-section-skills {
      0% {
        transform: rotate(45deg) translateY(-250px);
      }
      100% {
        transform: rotate(405deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 20%;
      left: 16%;
    }
  }
  &__contacts {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-contacts;
    @keyframes main-section-contacts {
      0% {
        transform: rotate(90deg) translateY(-250px);
      }
      100% {
        transform: rotate(450deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 22.5%;
      left: 27.5%;
    }
  }
  &__languages {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-languages;
    @keyframes main-section-languages {
      0% {
        transform: rotate(135deg) translateY(-250px);
      }
      100% {
        transform: rotate(495deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 23%;
      left: 25%;
    }
  }
  &__working-exp {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-working-exp;
    @keyframes main-section-working-exp {
      0% {
        transform: rotate(180deg) translateY(-250px);
      }
      100% {
        transform: rotate(540deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 22.5%;
      left: 21.25%;
    }
  }
  &__courses {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-courses;
    @keyframes main-section-courses {
      0% {
        transform: rotate(225deg) translateY(-250px);
      }
      100% {
        transform: rotate(585deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 21%;
      left: 25%;
    }
  }
  &__post {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-post;
    @keyframes main-section-post {
      0% {
        transform: rotate(270deg) translateY(-250px);
      }
      100% {
        transform: rotate(630deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 21%;
      left: 33.5%;
    }
  }
  &__education {
    position: absolute;
    border: 2px solid #dfdfdf;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    top: 43.5%;
    left: 46.75%;
    transform: rotate(0deg) translateY(-380px);
    animation: 30s linear 0s infinite normal $animation-play main-section-education;
    @keyframes main-section-education {
      0% {
        transform: rotate(315deg) translateY(-250px);
      }
      100% {
        transform: rotate(675deg) translateY(-250px);
      }
    }
    i {
      position: absolute;
      top: 25%;
      left: 13%;
    }
  }
}

Answer 1

你可以直接设置

.anim-stop{
animation-play-state: paused;}

然后使用 onmouseover 事件切换 class：

<div onmouseover="myToggleFunction()" class="main-section">

使用相同的类停止悬停 1 object 时的所有动画

Stop all animations on hovering 1 object with the same classes

html

css

sass

css-animations

使用相同的 类 停止悬停 1 object 时的所有动画

Stop all animations on hovering 1 object with the same classes

html

css

sass

css-animations

使用相同的类停止悬停 1 object 时的所有动画