Анимированный бэкграунд CSS

09.08.2015

Способ 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;
}

Демо

Способ 2

#bokeh-1, #bokeh-2{height:100%;position:absolute;top:0;left:0;right:0;}
#bokeh-1{
    background: url('../images/background/bokeh1.png') repeat-x center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-animation: sidescroll 480s infinite linear;
    -moz-animation: sidescroll 480s infinite linear;
    -ms-animation: sidescroll 480s infinite linear;
    -o-animation: sidescroll 480s infinite linear;
    animation: sidescroll 480s infinite linear; /* 8m */
    z-index: 2;
}
#bokeh-2{
    background: url('../images/background/bokeh2.png') repeat-x center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-animation: sidescroll 1440s infinite linear;
    -moz-animation: sidescroll 1440s infinite linear;
    -ms-animation: sidescroll 1440s infinite linear;
    -o-animation: sidescroll 1440s infinite linear;
    animation: sidescroll 1440s infinite linear; /* 24m */
    z-index: 1;
}

Демо

#CSS‏‎