如何仅在悬停时激活 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

在 :hover
上使用 animation-play-state:running; 以便它在悬停时播放。
没有悬停的元素应该是：animation-play-state:paused; 所以它不会运行ning 没有悬停。

设置 animation-iteration-count:infinite; 使动画运行无限（只要您在这种情况下悬停）。

如何仅在悬停时激活 CSS 动画 - 没有 javascript

How to activate a CSS animation only when hovering - without javascript

html

css

css-animations