CSSを動かすと回転したままの形にマウスが移動します

Question

私はこの問題を解決しようとしています以前は私の問題に合った答えが見つかりませんでした。

https://jsfiddle.net/z24qehew/

.diamond-container:hover, .diamond-container:active { 
 
    -webkit-animation: all 5s linear infinite; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 

 
    } 
 

 
    @-webkit-keyframes all 
 
    { 
 

 
    0% {-webkit-transform: rotateY(0deg);} 
 
    100% {-webkit-transform: rotateY(720deg);} 
 

 
    } 
 

 
    .tile-link { 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    float:left; 
 
    position: absolute; 
 
    top: 47px; 
 
    left: 11px; 
 
    text-align: center; 
 
    width: 200px; 
 
     } 
 
    
 
    .diamond-container:hover > .diamond{ 
 
    background: rgba(250, 255, 0, 1); 
 
    -webkit-transition: 0.5s ease-in-out; 
 
    -moz-transition: 0.5s ease-in-out; 
 
    -o-transition: 0.5s ease-in-out; 
 
    transition: 0.5s ease-in-out; 
 
     } 
 

 
    .diamond-container:hover > .tile-link a{ 
 
    color: #000; 
 
    text-decoration: none; 
 
    } 
 

 
    .diamond-container { 
 
    width: 250px; 
 
    height: 250px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
    padding: 10px; 
 
    } 
 

 

 

 
    .diamond { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 5px solid rgba(250, 255, 0, 1); 
 
    font: normal 100%/normal Arial, Helvetica, sans-serif; 
 
    color: rgba(0, 0, 0, 1); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
    transform-origin: bottom center; 
 
    }

   <div class="diamond-container"> 
 
        <div class="diamond"> 
 
        </div> 
 
        <div class="tile-link"> 
 
         <a href="#" class="yellow tile-link">Link</a> 
 
        </div> 
 
       </div>

あなたが例を実行した場合に形状が特定の時点では基本的に平坦であるので、あなたは、任意のわずかな動きとthatsの上のダイヤモンドのリセットを見ることができます。

私はそれがコンテナの幅と関係があるかもしれないと思っていますが、コンテナを変更するとダイヤモンドは回転の中心から離れています。

多くのありがとうございます！

Answer 1

問題は、ホバー上のアニメーションをトリガする要素がアニメーション化されている要素と同じであるため、マウスを動かすと新しいホバーイベントが発生することです。代わりに、親が動かされたときに子要素にアニメーションを適用します。

.diamond-container:hover .diamond { 
    animation: rotateY 5s ease-in-out; 
} 

上記は、あなたのダイヤモンド形状を回転させるだけです。それが完全に機能するようにするには、最初にマークアップを単純化するのが最善です。私はコンテナを使用して<a>と:before擬似要素を使用してダイヤモンドを達成することをお勧めします。

は、コードを減らすためにここにいくつかの自由を取ったが、それが働いている：https://jsfiddle.net/z6dqd492/

は、この情報がお役に立てば幸い！