problema con animazione css

[metatad]

Ho un'animazione css, che agisce sulla base di questo codice:

.faa-ring.animated, .faa-ring.animated-hover:hover {
	-moz-animation: ring 2s ease infinite;
	-moz-transform-origin-x: 50%;
	-moz-transform-origin-y: 0px;
	-moz-transform-origin-z: initial;


	-webkit-animation: ring 2s ease infinite;
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 0px;
	-webkit-transform-origin-z: initial;


	-ms-animation: ring 2s ease infinite;
	-ms-transform-origin-x: 50%;
	-ms-transform-origin-y: 0px;
	-ms-transform-origin-z: initial;


	animation: ring 2s ease infinite;
	transform-origin-x: 50%;
	transform-origin-y: 0px;
	transform-origin-z: initial;
}

L'animazione funziona perfettamente, quando si va col cursore sopra l'elemento con la classe faa-ring.animated
Io vorrei invece che l'animazione (solo su quell'elemento!) partisse quando il cursore si trova sull'elemento contenitore, che ha classe offer
Ma se aggiungo questa classe al css, così:

.offer, .faa-ring.animated, .faa-ring.animated-hover:hover {

o anche così:

.offer:hover, .faa-ring.animated, .faa-ring.animated-hover:hover {

l'animazione viene applicata all'intero elemento contenitore.
Come posso fare per ottenere l'effetto desiderato?
Ovvero: all'hover sull'elemento contenitore (classe offer), parte l'animazione sull'elemento contenuto (e solo su quello) con classe faa-ring.animated).
Grazie in anticipo!

[Prill]

che accade con

.offer:hover .faa-ring.animated, .offer:hover .faa-ring.animated-hover {...}

[metatad]

Così l'animazione non va proprio... :-(

[metatad]

Up...
nessun suggerimento?

[Prill]

.offer:hover .faa-ring.animated-hover, .faa-ring.animated, .faa-ring.animated-hover:hover{
-moz-animation:ring 2s ease infinite;
eccetera}

in questa maniera diciamo 1. che faa-ring.animated-hover figlio di offer si animi all'hover di offer, 2. poniamo l'animazione su faa-ring-animated (inutile usare in questo caso un selettore discendente e uno stato hover del padre perché l'animazione è continua); 3. ho lasciato come selettore anche faa-ring.animated-hover:hover seppure inutile, puoi toglierlo, perché lo stato hover è già sull'elemento padre.

Se non hai modificato altre cose nel css deve funzionare

[metatad]

Perfetto, funziona! Grazie mille...

.offer:hover .faa-ring.animated-hover, .faa-ring.animated, .faa-ring.animated-hover:hover{
-moz-animation:ring 2s ease infinite;
eccetera}