アニメーション画像でボーダー半径が動作しない

Question

360度回転するアンカーオーバーレイをアニメーション化し、ホバーすると円になるはずです。今朝はうまくいきました。そして、私はサイト上の他の要素について一日中働いていましたが、今はもう機能していないことに気付きました。

私はちょうど私の変更を追跡して2時間を費やしましたが、それはなぜかそれがうまくいかない理由を理解できません。 Firefoxのバグのために透明なオーバーレイラッパーを作成しました。アニメーションイメージをラッパーとして表示すると、クリックするとリンクがうまく動作しません。

This is the link to the website

左上のアイコンについて話してイム。ホバリングすると回転しているだけですが、ボーダー半径を50％に変更することはありません。通常はそれを実行し、2秒後にボーダー半径0に戻る必要があります。

多分あなたはそれがもう働かない理由を知っていますか？どんな種類のアイデアにも感謝します。

Answer 1

border-radiusが働いている事前に

おかげで、あなただけの.wrap_animationにoverflow:hiddenを追加する必要があります。

.wrap__animation { 
 
    position: absolute; 
 
    left: 0; 
 
    border-radius: 0; 
 
    outline: 1px solid transparent; 
 
    transition: all 2s; 
 
    height: 46px; 
 
    width: 46px; 
 
    top: 23px; 
 
    overflow: hidden; 
 
} 
 

 
.navigation__logo__wrap { 
 
    overflow: hidden; 
 
    z-index: -1; 
 
    height: 46px; 
 
    width: 46px; 
 
} 
 
    
 
.navigation__logo { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 60px; 
 
    width: 60px; 
 
    background: #f66437; 
 
    background: -moz-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%); 
 
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #f66437), color-stop(19%, #f66437), color-stop(37%, #f4352f), color-stop(37%, #f66437), color-stop(56%, #f4352f), color-stop(92%, #f66539), color-stop(100%, #f66539)); 
 
    background: -webkit-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%); 
 
    background: -o-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%); 
 
    background: -ms-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%); 
 
    background: linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#f66437', endColorstr='#f66539', GradientType=1); 
 
    animation: spin 4s linear infinite; 
 
    -moz-animation: spin 4s linear infinite; 
 
    -webkit-animation: spin 4s linear infinite; 
 
    -ms-animation: spin 4s linear infinite; 
 
    
 
} 
 

 
.wrap__animation:hover { 
 
    transform: rotate(1080deg); 
 
    border-radius: 50%; 
 
    transition: all 2s; 
 
}

<a class="page-link wrap__animation" href="index.html" title="home"> 
 
      <div class="navigation__logo__wrap"> 
 
       <div class="navigation__logo"></div> 
 
      </div> 
 
</a>