Объединение HTML анимаций, не выводит анимации не какую вообще

Question

Задача, объединить 3 HTML анимации использующие sprite.js. Суть в том что перепробовал несколько разных методов с разными подходами, единственный из которых сработал это реализация через iframe. Остальные же не выводят вообще не чего. Нужно сделать это используя дополнительный HTML файл и не используя iframe реализовать тоже самое что было реализовано сначала на нём, вроде всё перенёс, все перепроверил, но картинки как не было так и нет.

код написанный через iframe:

<!DOCTYPE html>
<html>
<head>
    <title>Объединенная страница</title>
    <style>
        iframe{
            display: inline-block;
            background-color: transparent;
            border: none;
            vertical-align: top;

        }
        #animation1{
            position: absolute;
            z-index: 1;
            left: -25px;
            animation: move 5s;
        }
        #animation2{
            position: absolute;
            left: 475px;
            transform: scaleX(-1);
            z-index: 1;
            animation: move1 5s;
        }
        #world_selection0c75{
            position: absolute;
            top: 150px;
            left: 250px;
            z-index: 0;
            transform: scale(2);
        }
        @keyframes move {
            from {
                left: -500px;
            }
            to {
                left: 0;
            }
        }
        @keyframes move1 {
            from {
                left: 1000px;
            }
            to {
                left: 500px;
            }
        }
    </style>
</head>
<body>
    <iframe src="animation1.html" id="animation1" width="500px" height="500px"></iframe>
    <iframe src="animation2.html" id="animation2" width="500px" height="500px"></iframe>
    <iframe src="world_selection0c75.html" id="world_selection0c75" width="500px" height="300px"></iframe>
    overflow: hidden;
</body>
</html>

код через XMLHttpRequest:

<!DOCTYPE html>

<html>
<head>
    <title>Объединенная страница</title>
    <style>
        /* Стили для контейнеров */
        #container {
            width: 500px;
            height: 500px;
            border: 1px solid black; /* Показать границу */
            padding: 10px;           /* Добавить отступы */
        }
        #animation1 {
            position: absolute;
            z-index: 1;
            left: 100px;
            animation: move 5s;
            border: 1px solid red; /* Показать границу */
            padding: 10px;           /* Добавить отступы */
            width: 500px;  /* Ширина элемента */
            height: 400px; /* Высота элемента */
        }
        #animation2 {
            position: absolute;
            left: 475px;
            transform: scaleX(-1);
            z-index: 1;
            animation: move1 5s;
            border: 1px solid blue; /* Показать границу */
            padding: 10px;           /* Добавить отступы */
        }
        #world_selection0c75 {
            position: absolute;
            top: 150px;
            left: 250px;
            z-index: 0;
            transform: scale(2);
            border: 1px solid green; /* Показать границу */
            padding: 10px;           /* Добавить отступы */
        }
        /* Анимации */
        @keyframes move {
            from {
                left: -500px;
            }
            to {
                left: 100;
            }
        }
        @keyframes move1 {
            from {
                left: 1000px;
            }
            to {
                left: 500px;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- Контейнеры для анимации -->
        <div id="animation1"></div>
        <div id="animation2"></div>
        <div id="world_selection0c75"></div>
    </div>


<script>
    function loadAndDisplayFile(filePath, containerId) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', filePath, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById(containerId).innerHTML = xhr.responseText;
            }
        };
        xhr.send(null);
    }

    // Загрузим и отобразим содержимое каждого файла
    loadAndDisplayFile('animation1.html', 'animation1');
    loadAndDisplayFile('animation2.html', 'animation2');
    loadAndDisplayFile('world_selection0c75.html', 'world_selection0c75');
</script>
</body>
</html>

на данный момент размеры анимаций в последнем варианте кода не так важны, пробовал как на более больших размерах так и на меньших. сразу спасибо всем кто помог!!

Answer 1

я не эксперт и только учу web но попробуй в css в айди елемента добавить это:

айди{
    animation-duration: 5s;
    animation-name: move;
    animation-iteration-count: infinite;//или другой вариант удобен для анимации
 }

или попробуй

айди{
    animation: 5s infinite move;
}

БЛОГ НА HUSL

Объединение HTML анимаций, не выводит анимации не какую вообще

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