Для создания вертикальной анимированной бесконечной прокрутки изображения, можно использовать следующий подход:
1. Создайте контейнер, в котором будут располагаться изображения. Например, div с классом "images-container".
2. Внутри контейнера добавьте несколько изображений, каждое изображение должно быть обернуто в отдельный div с классом "image".
3. В CSS задайте контейнеру "images-container" свойства:
```css
.images-container {
height: 300px; /* задайте желаемую высоту контейнера */
overflow: hidden; /* скрываем изображения, которые выходят за пределы контейнера */
position: relative; /* позиционирование относительно родительского элемента */
}
.image {
height: 100%; /* высота изображения равна высоте контейнера */
animation: scroll 10s linear infinite; /* запускаем анимацию движения вниз на 10 секунд */
}
@keyframes scroll {
0% {
transform: translateY(0); /* начальное положение изображения */
}
100% {
transform: translateY(-100%); /* изображение смещается вверх на 100% от высоты контейнера */
}
}
```
4. При необходимости, можно добавить дополнительные стили для изображений (например, ширина, отступы и др.).
5. Подключите стили к HTML документу и проверьте результат. Изображения должны начать бесконечно прокручиваться вертикально внутри контейнера.
Надеюсь, этот код поможет вам создать нужный эффект анимации. Если у вас возникнут дополнительные вопросы или пожелания, не стесняйтесь обращаться. Удачи!