停止与CSS鼠标悬停后图像翻转？

Question

我在sifrelimatematik.com下有Matematik-Geometri部分有3张图片。当你悬停在图像上时，它们会翻转360度，

.flip-container { 
    perspective: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 55%; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(360deg); 
    } 

.flip-container, .front, .back { 
    width: 110px; 
    height: 90px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 1.2s; 
    transform-style: preserve-3d; 
    padding-bottom: 98px; 
    position: relative; 
-webkit-animation-iteration-count: 2; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: ; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

但我希望图像停止鼠标悬停后翻转。当我在其他地方滚动时，我不想让它翻转。

喜欢这里的例子; lewendewoordmoot.co.za/（在Afdelings部分下）

我该怎么做？感谢帮助！

Answer 1

我认为animation属性可能有所帮助。

您可以定义一个名为“旋转”的新动画。

@keyframes rotation{ 
    to{transform:rotateY(360deg)} 
} 

你也可以使用animation而不是transition。

.flipper{ 
    animation-fill-mode: forwards; 
    animation: rotation 1.2s ease infinite; 
    animation-play-state: paused; 
} 
.flip-container:hover .flipper{ 
    animation-play-state: running; 
} 

如果你想让它发挥交替，您可以添加：

.flipper{ 
    animation-direction: alternate; 
} 

试试！