webkit-动画和链接问题

Question

在超链接菜单项时遇到问题。菜单附有 webkit 动画。灵感来自 codepen 演示，用于创建轨道菜单。环绕圆形菜单工作正常。不知何故，超链接不起作用。如果我可以在菜单悬停时暂停 webkit 动画，将不胜感激。为我指明正确的方向。

这里是 [codepen 演示链接] (https://codepen.io/aroganz/pen/ZEELqKr)

<div class="outCircle">
      <div class="rotate anim1">
        <div class="counterrotate">
          <div class="inner">Home
          </div>
        </div>
      </div>
      <div class="rotate anim2">
        <div class="counterrotate">
            <div class="inner"><a href="www.colorchalk.com">Our Team</a>
          </div>
        </div>
      </div>
      <div class="rotate anim3">
        <div class="counterrotate">
          <div class="inner"><a href="www.colorchalk.com">Our Servicces</a>
          </div>
        </div>
      </div>
      <div class="rotate anim4">
        <div class="counterrotate">
          <div class="inner">Contact
          </div>
        </div>
      </div>
    </div>

CSS 部分

    .outCircle {
      width: 300px;
      height: 300px;
      background-color: lightblue;
      left: 270px;
      position: absolute;
      top: 50px;
      -moz-border-radius: 150px;
      -webkit-border-radius: 150px;
      border-radius: 150px;
    }
    .rotate {
      width: 100%;
      height: 100%;
      position: absolute;  /* add this */
    }
    .counterrotate {
      width: 100px;
      height: 100px;
    }

    .inner {
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
      background: red;
      border-radius: 100px;
      background-color: red;
      display: table-cell;
    }


    .anim1 {
      -webkit-animation: circle1 35s infinite linear;
    }
    .anim1 .counterrotate {
      -webkit-animation: ccircle1 35s infinite linear;
    }
    .anim2 {
      -webkit-animation: circle2 35s infinite linear;
    }
    .anim2 .counterrotate {
      -webkit-animation: ccircle2 35s infinite linear;
    }
    .anim3 {
      -webkit-animation: circle3 35s infinite linear;
    }
    .anim3 .counterrotate {
      -webkit-animation: ccircle3 35s infinite linear;
    }
    .anim4{
      -webkit-animation: circle4 35s infinite linear;
    }
    .anim4 .counterrotate {
      -webkit-animation: ccircle4 35s infinite linear;
    }
    @-webkit-keyframes circle1 {
      from {
        -webkit-transform: rotateZ(0deg)
      }
      to {
        -webkit-transform: rotateZ(360deg)
      }
    }
    @-webkit-keyframes ccircle1 {
      from {
        -webkit-transform: rotateZ(0deg)
      }
      to {
        -webkit-transform: rotateZ(-360deg)
      }
    }
    @-webkit-keyframes circle2 {
      from {
        -webkit-transform: rotateZ(90deg)
      }
      to {
        -webkit-transform: rotateZ(450deg)
      }
    }
    @-webkit-keyframes ccircle2 {
      from {
        -webkit-transform: rotateZ(-90deg)
      }
      to {
        -webkit-transform: rotateZ(-450deg)
      }
    }
    @-webkit-keyframes circle3 {
      from {
        -webkit-transform: rotateZ(180deg)
      }
      to {
        -webkit-transform: rotateZ(540deg)
      }
    }
    @-webkit-keyframes ccircle3 {
      from {
        -webkit-transform: rotateZ(-180deg)
      }
      to {
        -webkit-transform: rotateZ(-540deg)
      }
    }
    @-webkit-keyframes circle4 {
      from {
        -webkit-transform: rotateZ(270deg)
      }
      to {
        -webkit-transform: rotateZ(630deg)
      }
    }
    @-webkit-keyframes ccircle4 {
      from {
        -webkit-transform: rotateZ(-270deg)
      }
      to {
        -webkit-transform: rotateZ(-630deg)
      }
    }

Answer 1

如果我可以在菜单悬停时暂停 webkit 动画，将不胜感激。

由于这里涉及到的不同元素有很多不同的动画，所以最简单的方法是类似于

.outCircle:hover * {
  animation-play-state: paused !important;
}

当容器元素悬停时，所有子元素的动画播放状态被设置为暂停，添加了!important，以便它覆盖任何可能在其他地方设置不同的状态。

您可以在这里更具体地使用选择器，因为有两类元素是动画的，所以要这样做

.outCircle:hover .rotate, .outCircle:hover .counterrotate {
  animation-play-state: paused !important;
}