webkit-animation and linking issue

Question

Having problem with hyperlinking a menu item. The menu has webkit animation attached. Inspired from a codepen demo to create a orbiting menu. The orbiting circle menu works fine. Somehow the hyperlinks are not working. Would appreciate if i can pause the webkit animation on menu hover. Point me in the right direction.

Here is the [codepen demo link] (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>

The CSS Part

    .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)
      }
    }

The hyperlinks are not clickable because each .rotate element is stacked on top of the others. Only the topmost element ("Contact") can be clicked. — Turnip
Thanks @Turnip for your concise look, didn't realize that. Alternately i picked up the jQuery alternative here — Aroganz

04FS 04FS · Accepted Answer · 2019-10-22T11:07:57

Would appreciate if i can pause the webkit animation on menu hover.

Since there is lots of different animations on different elements involved here, the easiest way to do this would be something along the lines of

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

When the container element gets hovered, the animation play state for all children gets set to paused, !important added so that it overwrite any states that might be set differently elsewhere.

You can be a bit more specific with the selector though here, since there’s two classes of elements that are animated, so make that

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

webkit-animation and linking issue

1 Answers