开发者

How to implement a webkit animation: backgroundmove

开发者 https://www.devze.com 2023-04-08 12:14 出处:网络
I\'ve seen a certain webkit animation type: backgroundmove. It basically just scrolls your background across the page, etc.

I've seen a certain webkit animation type: backgroundmove. It basically just scrolls your background across the page, etc.

I've written a little css blurb for a basic -webkit-backgroundmove animation, but it doesn't work! I've tried everything on IE9/FF4/Chrome (latest). Question: is there something that interferes with the animation, keeping it from starting? The background shows up, but doesn't scroll linearly, so I'm guessing that there's interference or a problem with -webkit-animation

My css is really basic:

div#wrapper.cloud-animation开发者_StackOverflow社区 {
    background-image: url(../images/clouds.png);
    background-size: 120%;
    background-repeat: repeat-x;
    background-position: -10px 150px;
    -webkit-animation: backgroundmove infinite 50s linear;
}

I can't even find documentation online for "webkit backgroundmove" so if anyone knows where to find it, that would be a big help! Thanks -


backgroundmove is a custom animation, it doesn't exist, you need to define it yourself.

@-webkit-keyframes backgroundmove {
    from {
        background-position: left top;
    }

    to {
        background-position: right top;
    }
}

Have a look at https://developer.mozilla.org/en/css/css_animations

0

精彩评论

暂无评论...
验证码 换一张
取 消