Moving clouds

by akmiecik

HTML

<div id="container">
        <div id="sky" class="background"></div>
        <div id="clouds" class="background"></div>
        <div id="mountains" class="background"></div>
    </div>

CSS

#container {
            position: relative;
            height: 300px;
            width: 500px;
            overflow: hidden;
        }

        .background {
            position: absolute;
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
        }

        #sky {
            background-image: url('https://catholicmeditation.com//wp-content/themes/astra-child/sky.png');
            z-index: 1;
        }

        #mountains {
            background-image: url('https://catholicmeditation.com//wp-content/themes/astra-child/mountains.png');
            z-index: 3;
        }

        #clouds {
            background-image: url('https://catholicmeditation.com//wp-content/themes/astra-child/clouds copy.png');
            z-index: 2;
            animation: moveClouds 130s linear infinite;
        }

        @keyframes moveClouds {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }