Question

我正在尝试基于这篇小文章（http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps）创建一个非常简单的动画序列，但似乎没有动画。

我的css代码如下

.mainContent {
    width:960px;
    height:388px;
    background:url('http://www.wearewebstars.dk/codepen/img/s1.png') repeat-x 0 0;
    background-color:#58e9a3;
    -webkit-animation: play 1s linear infinite;
    -moz-animation: play 1s linear infinite;
    -ms-animation: play 1s linear infinite;
    animation: play 1s linear infinite;
}

@keyframes play {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 0px -190px;
    }
    100% {
        background-position: 0px -300px;
    }
}

我的代码示例（css + html）可以在这里找到 http://jsfiddle.net/atragan/pqg2yrpL/

Answer 1

只需将prefix添加到keyframes，就像这样：

@-webkit-keyframes play {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 0px -190px;
    }
    100% {
        background-position: 0px -300px;
    }
}

@-moz-keyframes play {
    ...
}

@-o-keyframes play {
    ...
}

@keyframes play {
    ...
}

DEMO：http://jsfiddle.net/pqg2yrpL/1/

css3动画不工作|非常基本的例子

1 个答案: