css - Inheritance of animation keyframes of element -

i've got element .shake , when it's :hover animation starts. need inherit shake element properties , animation :hover effect.

i've got

.inherit-shake {    .shake; } 

it doesn't work because .inherit-shake inherits primary .shake properties :hover animation.

is there way using less?

if rules .shake , .shake:hover written in below snippet current code should work as-is.

.inherit-shake {.shake;} .shake{     a:a;     &:hover{b:b;} } 

however, think written below , reason why :hover rules don't applied .inherit-shape selector.

.inherit-shake {.shake;} .shake{a:a;} .shake:hover{b:b;} 

---

the best solution use model mentioned in first snippet. however, if can't change source mixin's whatever reason best make use of extend function all keyword in below snippet:

.inherit-shake {&:extend(.shake all);} .shake{a:a;} .shake:hover{b:b;} 

the all keyword within extend function make sure .inherit-shake:hover gets same properties applicable .shake:hover. compiled css output below:

.shake, .inherit-shake {a: a;} .shake:hover, .inherit-shake:hover {b: b;} 

added advantage of using extend function automatically group selectors (like in output shown above).