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

删除额外空格也请参阅更新后的DEMO

注意：OP在动画中提供 left 属性，所以我也添加了的位置：绝对

Answer 2

使用;作为@manwal建议，left需要定位，以便您可以使用margin-left代替并删除旋转之间的额外空格，因为它是一个函数。

@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

为什么这个矩形没有旋转？

2 个答案: