CODEWITHSUNDEEP
csscss-transitions
Sinan
Sinan

Reputation: 5980

Continuous CSS transitions

Is there a way to continuously animate a background image's background-position property using CSS3 transitions?

Upvotes: 6

Views: 13369

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Yes, it's possible - DEMO

div
{
    background: url(http://lorempixel.com/100/100);
    height: 100px;
    width: 100px;

    -webkit-animation: slide 2s linear infinite;
       -moz-animation: slide 2s linear infinite;
            animation: slide 2s linear infinite;
}


@-webkit-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}​

@-moz-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

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

​

Upvotes: 16

Related Questions