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

Question

Is there a way to get this CSS code:
/** 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;
}
/****/
Generated from this website: https://coveloping.com/tools/css-animation-generator
To work only when hovering over an element?
I added:
.swing:hover {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
Myself and it's not working.
Oh... And I'm trying to avoid using javascript/jQuery so the page will load faster..

Answer 1

Demo
Use the animation-play-state:running; on :hover
so that it plays while hovering over.
Not hovered element should then be : animation-play-state:paused; so its not running without hover.
Setting the animation-iteration-count:infinite; makes the animation run infinite (as long as you hover in this case).