CODEWITHSUNDEEP
htmlcss
Iter Ator
Iter Ator

Reputation: 9279

Animate div background-position (CSS)

I would like to animate the background of my div. The background position should move from left-top, to right-bottom. For some reason, nothing happens. And I have no idea why

.test {
    width: 50%;
    height: 250px;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
    background-size: 100% 100%;

    animation: moving-gradient 1s infinite;
}

@keyframes moving-gradient {
    0% {
        background-position: left top;
    }

    100% {
        background-position: right bottom;
    }
}

JSFiddle:

http://jsfiddle.net/uLedmk5k/

Upvotes: 0

Views: 211

Answers (3)

emn178
emn178

Reputation: 1492

A stupid way but works http://jsfiddle.net/uLedmk5k/9/

Use 4 div and translate

HTML

<div class="test">
    <div class="bg"></div><div class="bg"></div>
</div>

CSS

.test {
    width: 50%;
    height: 250px;

    overflow: hidden;
}

.bg {
    white-space: nowrap;
    width: 100%;
    height: 100%;
    animation: moving-gradient 1s infinite;
    -webkit-animation: moving-gradient 1s infinite;
}

.bg::after, .bg::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
    background-size: 100% 100%;
}

@keyframes moving-gradient {
    0% {
        transform: translate(-100%, -100%);
    }
    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes moving-gradient {
    0% {
        transform: translate(-100%, -100%);
    }
    100% {
        transform: translate(0, 0);
    }
}

Upvotes: 1

Andi North
Andi North

Reputation: 897

Instead of moving the background image, have you tried moving the element?

translate is a very efficient and smooth (because of its anti-aliasing) way to move elements on screen, plus you can use percentages with ease.

An example Fiddle might help explain?

Although I may have completely misunderstood what you're trying to achieve.

Upvotes: 1

Kaiido
Kaiido

Reputation: 136638

You have to use fixed values for your background animation to work : 

@keyframes moving-gradient {
    0% {
        background-position: 0,0;
    }

    100% {
        background-position: 200px 250px, 200px 250px;
    }
}

So you will have to set a fixed width to your element too : 

.test {
     width: 200px;

Fiddle

Edit from comments

if you set your width to viewport units it will work too : 

.test {
    width: 50vw;
    height: 250px;

and in animation 

100% {
    background-position: 50vw 250px, 50vw 250px;
}

Fiddle
I'm not sure why but looking to computed tab in Firebug shows that viewport units are actually interpreted as fixed px values

Upvotes: 2

Related Questions