Как анимировать фоновое изображение для перемещения по тексту?

Question

Я работаю над фиктивным сайтом для портфолио.

До сих пор, это выглядит следующим образом:

То, что я хочу сделать, это синее небо изображение постоянно прокручивать вправо, так это выглядит, как облака движутся в текст заголовка ,

Вот CSS У меня есть текст прямо сейчас:

#site-title { 
font-size: 20em; 
background: url('../../img/colors.jpg') no-repeat bottom center; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
} 

Можно ли сделать облако фон двигаться бесконечно вправо, не затрагивая текст?

Спасибо за любую помощь.

Answer 1

Вы можете использовать ключевые кадры для достижения этого эффекта.

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

#animate-area { 
    width: 560px; 
    height: 400px; 
    background-image: url(bg-clouds.png); 
    background-position: 0px 0px; 
    background-repeat: repeat-x; 

    animation: animatedBackground 40s linear infinite; 
} 

См. code example and demo here.