Как сделать анимацию иконки?

Question

[Богдан]

Есть иконки в двух цветах, нужно чтобы при наведении цвет плавно менялся с серого на синий. Как это реализовать?

Answer 1

[Антон]

Html:
<div class="block">Текст</div>
Css:

.block {
   background: gray;
   color: #FFF;
   cursor: pointer;
   transition: 3s;
}

.block:hover {
   background: blue;
}

Цвета и прочие стили уже сами сделаете под себя. Ключевое свойство здесь - transition. И его значение можете поменять.

UPD: А для svg изображений/иконок вот такой код:

svg {
  fill: gray;
  transition: fill 2s ease;
}

svg:hover {
  fill: blue;
}

Comments

[Богдан]

Тут суть в том, что это картинки, а не созданные при помощи кода элементы.

[Антон]

underlower, если иконки - это именно изображения, а не шрифты, то они должны быть svg формата. Тогда можно будет сделать плавное изменение цвета. Например:

svg {
  fill: gray;
  transition: fill 2s ease;
}

svg:hover {
  fill: blue;
}

[Антон]

underlower, Расположите две картинки рядом, у одной понижайте opacity, у другой поднимайте

[Богдан]

Антон Алексеевич, Просто так это не работает. У меня ко всему прочему нужно применять градиент, а не просто цвет.

[Eobard Thawne]

underlower,

div {
 background-image: url("first-img.jpg");
 transition: all .3s;
}

div:hover {
 background-image: url("second-img.jpg");
 transition: all .3s;
}

так не пойдет?

[Арсений Матыцин]

underlower,

Ключевое свойство здесь — transition

[Богдан]

Арсений Матыцин, Да, по поводу анимации я понимаю. Я немного не правильно вопрос поставил. Меня больше интересует как svg файл с серого переделать в градиент синего (имеется svg файл и серый, и в градиенте синего)

[Богдан]

Eobard Thawne, Почему-то элемента вообще не видно. Мне нужно чтобы иконка была ссылкой