css3 animation (frame by frame)

My animation is broken and I can’t figure how to fix it- here is it in browser: http://morxmedia.com/animation-test.html

I need it to smoothly go through each 150px X 150px block in the sprite sheet

Here’s the code:

#loading {
    background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px;
    background-size: 1px 9px;
    width: 1px;
    height: 1px;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform: scaleX(150) scaleY(150);
    -webkit-transform-origin: top left;
}
    @-webkit-keyframes loading
    {
        0.000%
        {
            background-position: 0 -0px;
        }
        12.000%
        {
            background-position: 0 -1px;
        }
        24.000%
        {
            background-position: 0 -2px;
        }
        36.000%
        {
            background-position: 0 -3px;
        }
        48.000%
        {
            background-position: 0 -4px;
        }
        60.000%
        {
            background-position: 0 -5px;
        }
        72.000%
        {
            background-position: 0 -6px;
        }
        84.000%
        {
            background-position: 0 -7px;
        }
        96.000%
        {
            background-position: 0 -8px;
        }
        100.000%
        {
            background-position: 0 -9px;
        }
    }


Problem courtesy of: Stephen

Solution

The trick you are using with pixels and scaling makes my head hurt. Here is how I would approach it:

#loading {
    background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px;
    width: 150px;
    height: 150px;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
    @-webkit-keyframes loading
    {
        0.000%
        {
            background-position: 0 -0px;
        }
        10.999%
        {
            background-position: 0 -0px;
        }
        11.000%
        {
            background-position: 0 -150px;
        }
        21.999%
        {
            background-position: 0 -150px;
        }
        22.000%
        {
            background-position: 0 -300px;
        }
        32.999%
        {
            background-position: 0 -300px;
        }
        33.000%
        {
            background-position: 0 -450px;
        }
        43.999%
        {
            background-position: 0 -450px;
        }
        44.000%
        {
            background-position: 0 -600px;
        }
        54.999%
        {
            background-position: 0 -600px;
        }
        55.000%
        {
            background-position: 0 -750px;
        }
        65.999%
        {
            background-position: 0 -750px;
        }
        66.000%
        {
            background-position: 0 -900px;
        }
        76.999%
        {
            background-position: 0 -900px;
        }
        77.000%
        {
            background-position: 0 -1050px;
        }
        87.999%
        {
            background-position: 0 -1050px;
        }
        88.000%
        {
            background-position: 0 -1200px;
        }
        100.000%
        {
            background-position: 0 -1200px;
        }
    }


If you change the duration to be a bit slower, you’ll see that the jitter is due to some imperfections in the animation sprite sheet you are using.

Solution courtesy of: Joshua Smith

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » css3 animation (frame by frame)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录