如何激活徘徊，只有當一個CSS動畫 - 無javascript

Question

有沒有辦法讓這個CSS代碼：

/** Swing **/ 
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-5deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 
@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); } 
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
} 

.swing { 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
} 


/****/ 

從本網站生成：https://coveloping.com/tools/css-animation-generator

要只工作上空盤旋的元素時？ 我說：

.swing:hover { 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
} 

我和它不工作。

哦...而我試圖避免使用javascript/jQuery的所以頁面將加載速度更快..

Answer 1

Demo

使用animation-play-state:running;上:hover
，使其播放而徘徊在。
未懸停的元素應該是：animation-play-state:paused;所以它沒有運行沒有懸停。

設置animation-iteration-count:infinite;會使動畫無限（只要您在此情況下懸停）。