Спецификация переходов CSS3 содержит список всех свойств, которые можно анимировать. Этот список, насколько нам известно, содержит свойства, которые можно анимировать как с помощью переходов, так и анимаций ключевых кадров. Но это список именно свойств. И так как градиенты CSS3 не совсем свойства, а фактически изображения, создаваемые браузером, их нет в этом списке свойств, которые можно анимировать. Но это не означает, что их нельзя анимировать.

Градиенты, как и обычные изображения, управляются определенными свойствами, связанными с фоном, которые можно анимировать. Эти свойства включают размер фона и расположение фона.

Чтобы показать, как можно анимировать градиенты, мы создали кнопки, у которых анимируются градиенты при наведении указателя мыши:

Демонстрация работы

В коде ниже нет ничего слишком сложного. Это код второй кнопки на странице демонстрации, с помощью него можно увидеть, как анимируются градиенты:

.two:link, .two:visited {
  background: #2876b2;
  background: -webkit-linear-gradient(#2876b2, #549ad0);
  background: linear-gradient(#2876b2, #549ad0);
  background-repeat: repeat;
  background-size: 100% 200%;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
}
.two:hover, .two:focus, .two:active {
  background-position: 0 -102%;
}

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

В этом примере заданы одинаковые значения для состояния при наведении указателя мыши, фокуса и нажатия, но можно задать разные анимации всем этим псевдоклассам.

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

Этот способ использовался для кнопок на сайте HTML9 Boilerstrap website.

Возможности этого способа бесконечны, надеемся, с помощью этих простых примеров, показывающих идею, Вы сможете создать интересные эффекты. Если Вам нужны красивые градиенты для анимирования, посмотрите в галерее регулярных фоновых текстур Lea Verou, созданных с помощью градиентов.

Демонстрация работы

Автор урока Louis Lazaris

Перевод — Дежурка

Смотрите также:

• Использование свойства CSS тени блока
• Создание улучшенных фонов с помощью режима наложения
• Создание анимированных подчеркиваний для ссылок