停止與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; 
} 

試試！