关键帧动画无法启动

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

您的关键帧声明中出现了一个小的语法错误 - 无需编写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); } } ，因此请将其删除：

.breadcrumbs{
    height: 100px;
    text-align:center;
    line-height:50px;
}

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