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>

当你运行这个例子时，你可以看到菱形在任何轻微的移动时都会重置，这是因为形状在特定的点上基本上是平坦的。

我认为这可能与容器的宽度有关，但是一旦你修改了容器，那么菱形在旋转时就会偏离中心。

多谢!

Answer 1

问题是触发悬停动画的元素与正在动画的元素是同一元素，所以当鼠标移动时，会发生新的悬停事件。当父元素悬停时，将动画应用于子元素。

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

以上只会使你的菱形旋转。为了使其完全工作，最好首先简化标记。我建议使用一个容器和一个带有:before伪元素的<a>来实现菱形。

在这里花了一些自由来减少代码，但它工作:https://jsfiddle.net/z6dqd492/

希望这对你有帮助!