Анимация спрайта на CSS на примере персонажа

Всем привет! В этом уроке мы научимся делать анимацию спрайта на CSS. С помощью этой технологии мы сможем внедрить любую анимацию на сайте.

Посмотреть результат

Содержание файлов:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анимация Спрайта</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="sprite-container">
        <div class="sprite-image"></div>
    </div>

</body>

</html>

style.css

.sprite-container {
    height: 100vh;
    display: flex;
    align-items: center;
}

.sprite-image {
    height: 123px;
    width: 70px;
    background: url(img/smur-sprite.png) 0px 0px;
    animation: play 0.8s steps(16) infinite,
        step 10s linear infinite;
    position: absolute;
    left: 0;
}

@keyframes play {
    100% {
        background-position: -1135px;
    }
}

@keyframes step {
    100% {
        left: 100%;
    }
}

Изображение

Скачать изображение

Видео с пошаговой инструкцией

Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.