как мне анимировать эту png картинку, чтоб при наведении валики передвинулись направо так чтобы был эффект рисования
Пробовал разделить картинку на 3 фрагмента и с помощью hover как ни будь создать эффект появления, но что-то пошло не так, помогите кто знает )) 
Ответы (1 шт):
Автор решения: Gojira
→ Ссылка
Есть вариант.
Берем блок делаем ему ширину и высоту, закрашиваем его полоской от краски. Валик отдельной картинкой используем для фона псевпоэлемента before. При этом нужно закрасить before в цвет фона и поверх фона налепить картинку валика. (так сделать можно при помощи background-color и background-image, а при наведении на наш блок сдвигаем before на нужное нам расстояние и таким образом получится нужный эффект.
Вот код самой идеи реализации.
<div class="wrap"></div>
.wrap {
width: 100px;
height: 30px;
background: red;
position: relative;
}
.wrap:before {
content: "";
width: 50px;
height: 30px;
background: #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(0);
transition: .7s ease-in-out;
}
.wrap:hover:before {
transform: translateX(100%);
}