CSS 전환 마우스가 회전 된 모양으로 움직일 때마다 움직입니다.

Question

이 문제를 해결하기 위해 노력하고 있습니다 이전에 내 문제와 일치하는 답변을 찾을 수 없지만이 문제가 발생하면 어떻게 작동하는지 이해할 수 없습니다.

당신이 모양이 특정 지점에서 기본적으로 상관 없음 약간의 운동과 그게 전부에 다이아몬드 재설정하기 때문에 볼 수있는 예제를 실행

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

https://jsfiddle.net/z24qehew/

.

컨테이너의 너비와 관련이 있을지 모르지만 컨테이너를 수정하자마자 다이아몬드가 회전 중심에서 벗어납니다.

많은 감사!

Answer 1

마우스를 움직이면 애니메이션을 트리거하는 요소가 애니메이션 요소와 동일하므로 마우스를 움직이면 새로운 마우스 오버 이벤트가 발생합니다. 대신 부모가 공중에 떠있을 때 자식 요소에 애니메이션을 적용하십시오.

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

위의 그림은 다이아몬드 모양 만 회전시킵니다. 작동 시키려면 먼저 마크 업을 단순화하는 것이 가장 좋습니다. 나는 용기를 사용하고 다이아몬드를 얻기 위해 <a>을 :before 가짜 요소와 함께 사용하는 것이 좋습니다.

코드를 줄이기 위해 여기에 몇 가지 자유를 툭하지만 일하고 :이 도움이 https://jsfiddle.net/z6dqd492/

희망을!