Анимированная рамка с градиентом

Что нужно

Нужно написать стили для ссылки таким образом, чтобы рамке с градиентом добавлялась анимация.

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

При наведении на кнопку включается анимация рамки

Точное совпадение не обязательно

Не нужно добиваться точного совпадения в цветах градиента и эффекта анимации. Главное — суть: есть рамка с градиентом, она анимируется при наведении и замирает, когда убираем курсор.

Чего нельзя

Запрещается править HTML. Нельзя использовать Javascript, даже если очень хочется; он тут не нужен.

Решение

Используйте вкладку «CSS» для добавления стилей, а во вкладке «Result» отслеживайте, что получается.

Публиковать в комментариях только CSS не стоит, это не наглядно. Размещайте свой вариант решения на jsfiddle.net и делитесь ссылкой в комментариях.