Animating background-image


by Jeremy Caudle
code

I just realized that I've never tried to animate the position of an element's background before. I've used it within media queries before, but never animated it. This could be interesting, but needs to be used subtlely.

View the code:

HTML and JS 
<div class="codedoodle-block">

</div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:300px;
            height: 300px;
            background-color: transparent;
            border-radius: 50%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
            background-image: url('https://jeremycaudle.com/ygg/resources/c9fe90d8-3b55-4f31-883d-25b97af0752f.jpeg');
            background-repeat: no-repeat;
            background-clip: border-box;
            animation: bgmove 5s cubic-bezier(1,0,0,1) 0s infinite alternate;   
        }

        @keyframes bgmove {
            from{background-position-x: 0%; background-position-y: 66%;}
            to{background-position-x: 50%; background-position-y: 20%;}
        }

Tags