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>Animation - HTML</title>

    <style>
        body {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            background-position: center;
        }

        @media (max-width: 650px) {
            marquee img {
                width: 50%;
            }
        }

        @media (min-width: 1440px) {
            marquee img {
                width: 50%;
            }
        }
    </style>

</head>

<body background="images/bg.jpg">
    <marquee scrollamount="10%">
        <img src="images/birds.gif" width="16%" />
    </marquee>

    <br><br><br><br><br><br><br><br><br><br><br><br>

    <marquee direction="right" scrollamount="25">
        <img src="images/1.gif" width="25%" />
        <img src="images/2.gif" width="24%" />
        <img src="images/3.gif" width="20%" />
        <img src="images/4.gif" width="27%" />
    </marquee>

</body>

</html>