задачка: анимированная рамка

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

Сделайте, чтобы рамке с градиентом добавлялась анимация при наведении на элемент.

Главная » Задачка на прокачку » Анимированная рамка с градиентом
Задачка на прокачку — упражнение на знание CSS. Времени на решение уйдёт не много, а размяться поможет. Главное условие — соблюдать ограничения.

Что нужно

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

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

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

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

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

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

Чего нельзя

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

Решение

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

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