为什么这个矩形不旋转？

Question

这个红色矩形本应具有动画效果，但实际上没有。我找了一个错字，但仍然不知道出了什么问题。 http://jsfiddle.net/gcgtcwqv/1/

jQuery:

jQuery('<div/>', {
    class: 'logo',
    text: 'Cake Baby'
    }).appendTo($("#cakeHook"));

CSS:

.logo {
    width: 100px;
    height: 30px;
    background-color: red;
    -webkit-animation-name: CB; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    animation-name: CB;
    animation-duration: 5s;
    animation: CB 5s; 
    -webkit-animation: CB 5s;
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-iteration-count: 1;
}

@keyframes CB {
    0%  {left: 0px, transform: rotate(0deg);}
    25%  {left: 20px, transform: rotate (10deg);}
    75%  {left: 10px, transform: rotate (15deg);}
    100% {left: 5px, transform: rotate(0deg);}
}

@-webkit-keyframes CB {
    0%  {left: 0px, transform: rotate(0deg);}
    25%  {left: 20px, transform: rotate (10deg);}
    75%  {left: 10px, transform: rotate (15deg);}
    100% {left: 5px, transform: rotate(0deg);}
}

Answer 1

你这里有错别字：

0%  {left: 0px, -webkit-transform: rotate(0deg);}
              ^

这里应该是;而不是,

这是工作Demo

删除了额外的 space 另见更新后的 DEMO

Note: OP was giving left property in animation, so i have also added position:absolute.

Answer 2

按照@manwal 的建议使用 ; 并且 left 需要定位，因此您可以改用 margin-left 并在旋转之间删除多余的 space，因为它是一个函数。

@keyframes CB {
    0%{margin-left:0px;transform: rotate(0deg);}
    25%{margin-left:20px;transform: rotate(10deg);} 
    75%{margin-left:10px;transform: rotate(15deg);}
    100%{margin-left:5px;transform: rotate(0deg);}
}

Working Demo

@keyframes CB {
    0%{left:0px;transform: rotate(0deg);}
    25%{left:20px;transform: rotate(10deg);}
    75%{left:10px;transform: rotate(15deg);}
    100%{left:5px;transform: rotate(0deg);}
}
.logo{
    position:relative;
    ....
}

Demo with left position

为什么这个矩形不旋转？

Why isn't this rectangle rotating?

jquery

css-animations