Как заставить эту CSS-анимацию с фоновыми изображениями работать в этом файле Markdown?

Question

Я хочу анимировать <canvas>, изменяя фоновое изображение с течением времени, используя правило @keyframes в css. Я не могу заставить анимацию работать. Я даже не могу получить тег <canvas> для отображения одного статического изображения. Может кто-нибудь проверить мой код, чтобы увидеть, где я ошибся?

Я пробовал:

• Тестирование того же кода в простом HTML-файле
• Использование файлов изображений ".jpg" вместо ".png"
• Не использовать отдельный класс для тега canvas. Итак, в этом коде я написал <canvas class="jump-animation"></canvas>, но я также попытался поместить стиль анимации в тег canvas и использовать <canvas></canvas>, но это также не работает

Вот файл уценки:

<link href="resources/style.css" rel="stylesheet" type="text/css" />

<h1>HELLO?!</h1>
<canvas class="jump-animation"></canvas>

А вот таблица стилей:

canvas {
    width: 500px;
    height: 500px;
    background-size: contain;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.jump-animation {
    -webkit-animation-name: jump;
    -webkit-animation-duration: 7s;

    animation-name: jump;
    animation-duration: 7s;
}

@-webkit-keyframes jump {
    0%      { background: url(resources/jumpAnimation/frame1.png); }
    14%     { background: url(resources/jumpAnimation/frame2.png); }
    28%     { background: url(resources/jumpAnimation/frame3.png); }
    42%     { background: url(resources/jumpAnimation/frame4.png); }
    56%     { background: url(resources/jumpAnimation/frame5.png); }
    80%     { background: url(resources/jumpAnimation/frame6.png); }
    100%    { background: url(resources/jumpAnimation/frame7.png); }
}

@keyframes jump {
    0%      { background: url(resources/jumpAnimation/frame1.png); }
    14%     { background: url(resources/jumpAnimation/frame2.png); }
    28%     { background: url(resources/jumpAnimation/frame3.png); }
    42%     { background: url(resources/jumpAnimation/frame4.png); }
    56%     { background: url(resources/jumpAnimation/frame5.png); }
    80%     { background: url(resources/jumpAnimation/frame6.png); }
    100%    { background: url(resources/jumpAnimation/frame7.png); }
}

h1 {
    color: white;
}

Заголовок со словом "ПРИВЕТ ?!"просто проверить, правильно ли связана таблица стилей. Если я изменю цвет для тега h1 в таблице стилей, файл уценки ответит на изменение. Но ничего, что я делаю для тега <canvas>, похоже, не работает

Это также скорее говорит о том, что я даже не могу заставить тег <canvas> отображать статическое изображение для фона в Markdownили в HTML, который подсказывает мне, что здесь есть что-то большее, чего мне не хватает

Так, например, в таблице стилей я попытался:

canvas {
    width: 500px;
    height: 500px;
    background-size: contain;
    background: url(resources/jumpAnimation/frame1.png);
}

, который не имел абсолютно никакого эффектана дисплее тега <canvas>. Это было все еще пусто

Answer 1

OHMYGOSHIMDUMB

Таблица стилей style.css - это в в папке «resources». Это означает, что все URL с «ресурсами / впереди» неверны. Мне нужно удалить все части "resources /" перед всеми ссылками на изображения. После того, как я это сделал, все изображения были загружены правильно

Спасибо, что разрешили мне опубликовать этот вопрос, хотя это была тривиальная проблема;)