Анимирование фонового изображения

by SerGen

HTML

<a class="elem" href="#"><span>Искать</span></a>

CSS

body {
    background-color: #dfeff0;
    font-family: sans-serif;
    font-size: 2em;
    margin: 3em;
}

.elem,
.elem:before,
.elem:after {
    transition: .5s;
}
.elem {
    color: #000;
    position: relative;
}
.elem:hover { color: red; }

.elem:after { opacity: 0; }
.elem:hover:after { opacity: 1; }

.elem:before,
.elem:after {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 1em;
    padding-left: .2em;
    width: 1em;
}
.elem:before {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    right: 0;
}
.elem:after {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2012L8%208%22%20stroke%3D%22red%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20class%3D%22glass%22%20cx%3D%225%22%20cy%3D%225%22%20fill%3D%22none%22%20r%3D%224%22%20stroke-width%3D%222%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E");
    position: relative;
}