html - 关键帧动画不启动

Question

我正在制作我的元素，但是当我从动画中添加关键帧时，这不起作用。对于不工作，我的意思是不启动。我想要的结果是这样的(抱歉质量不好):

我刚刚尝试添加相对位置、更改动画名称或添加不同的样式，但问题是其他的，动画没有启动。这是代码: http://jsfiddle.net/zoL2w1fk/

    <div id="shop">
    <img src="https://i.gyazo.com/450ec7c827a3e004f38d9b70220a2e46.png" id="shop-image">
</div>

    -webkit-keyframes shopanimation {

    from 0% {
        -ms-transform: rotate(10deg); /* IE 9 */
        -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
        transform: rotate(10deg);
    }
    to 100% {
        -ms-transform: rotate(-10deg); /* IE 9 */
        -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
        transform: rotate(-10deg);
    }
}
@keyframes shopanimation {
    from 0% {
        -ms-transform: rotate(10deg); /* IE 9 */
        -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
        transform: rotate(10deg);
    }
    to 100% {
        -ms-transform: rotate(-10deg); /* IE 9 */
        -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
        transform: rotate(-10deg);

    }
}
div#shop {
    background-color:#33373f;
    width:100%;
    height:100px;
}
div#shop img {
    cursor:pointer;
    /*TEST*/
    -webkit-animation: shopanimation 1s infinite; /* Safari 4+ */
    -moz-animation:    shopanimation 1s infinite; /* Fx 5+ */
    -o-animation:      shopanimation 1s infinite; /* Opera 12+ */
    animation:         shopanimation 1s infinite; /* IE 10+, Fx 29+ */
}
div#shop:hover > img {
    -webkit-animation: shopanimation 1s infinite; /* Safari 4+ */
    -moz-animation:    shopanimation 1s infinite; /* Fx 5+ */
    -o-animation:      shopanimation 1s infinite; /* Opera 12+ */
    animation:         shopanimation 1s infinite; /* IE 10+, Fx 29+ */
}

感谢您抽出宝贵时间向我提出建议 :)

Answer 1

你的关键帧声明中有一个小的语法错误 - 不需要编写 from 和 to，所以只需删除它们:

-webkit-keyframes shopanimation {
    0% {
        -ms-transform: rotate(10deg); /* IE 9 */
        -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
        transform: rotate(10deg);
    }
    100% {
        -ms-transform: rotate(-10deg); /* IE 9 */
        -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
        transform: rotate(-10deg);
    }
}
@keyframes shopanimation {
    0% {
        -ms-transform: rotate(10deg); /* IE 9 */
        -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
        transform: rotate(10deg);
    }
    100% {
        -ms-transform: rotate(-10deg); /* IE 9 */
        -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
        transform: rotate(-10deg);

    }
}

这是一个 updated JSFiddle .希望这可以帮助!如果您有任何问题，请告诉我。