Переопределение анимации импульса CSS при наведении курсора мыши ⇐ CSS

[Anonymous]

У меня есть пульсирующий круг, который должен прекращать пульсацию при наведении курсора, но затем масштабироваться до нужного размера.

Код: Выделить всё

@keyframes pulse {
0%, 100% {
transform: scale(1);
animation-timing-function: ease-in;
}

50% {
transform: scale(1.33);
}
}

.circle{
border-radius: 50%;
border: 5px solid #f0f;
height: 30px;
width: 30px;

animation: pulse 2s infinite;
&:hover{
transform: scale(1.33);
animation-play-state: paused;
}
}

мне бы хотелось, чтобы при наведении масштаба был выбран правильный размер из того места, где он находится в анимации.
т.е. если в настоящее время при уменьшении размера используется масштаб (1.2), вернитесь к масштабу (1.33) при наведении курсора мыши.
-- обратите внимание: это должно произойти, а не просто привязаться к этому размеру.
возможно ли это с помощью CSS? нужно ли мне поработать над каким-то другим волшебством?
вот пример jsfiddle.

Подробнее здесь: https://stackoverflow.com/questions/662 ... e-on-hover