border-radius funktioniert nicht mehr auf animiertem Bild

Question

Ich animierte ein Anker-Overlay, das 360 Grad dreht und sich beim Schweben in einen Kreis verwandeln sollte. Es hat heute Morgen gut funktioniert, dann habe ich den ganzen Tag an anderen Elementen auf der Seite gearbeitet und jetzt habe ich gemerkt, dass es nicht mehr funktioniert.

Ich habe gerade 2 Stunden damit verbracht, meine Änderungen zurück zu verfolgen, kann aber immer noch nicht herausfinden, warum zur Hölle es nicht funktionieren würde. Ich habe den transparenten Overlay-Wrapper wegen Firefox-Bugs erstellt, wenn ich den Mauszeiger über das animierte Bild als Wrapper halte, würde der Link beim Klicken nicht funktionieren.

This is the link to the website

sprechen Im über das Symbol oben links. Beim Schweben dreht es sich nur, aber ändert den Rand-Radius nicht auf 50%. Normalerweise sollte es das tun und dann in 2 Sekunden zum Grenzradius 0 zurückkehren.

Vielleicht haben Sie eine Idee, warum es nicht mehr funktioniert? Würde mich über jede Art von Ideen freuen.

Vielen Dank im Voraus

Answer 1

border-radius funktioniert, müssen Sie nur noch overflow:hidden-.wrap_animation hinzuzufügen.

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