Как сделать бегущее изображение средствами CSS через свойство animation (@keyframes)?

Question

Сейчас есть бегущее изображение, которое двигается постоянно справа налево, задано изображение через:

background: url('/images/plashka.jpg') 0 0 repeat #fff;

Как сделать так, чтобы изображение задавалось через тэг <img>?

Answer 1

Задать его через тег img...))

<img src="URL" alt="альтернативный текст">

HTML:

<div class="pic"><img src="/images/pic.png" alt="Картинка"></div>

CSS:

.pic {animation-duration: 5s;
 animation-name: slidein;
 animation-iteration-count: infinite; } 



@keyframes slidein {
  from { margin-left: 0%; width: 100%;}
  to { margin-left: 100%;
  width: 300%;}}

Демо

БЛОГ НА HUSL

Как сделать бегущее изображение средствами CSS через свойство animation (@keyframes)?

Ответы (1 шт):