你可以尝试这样做

将父对象设置为rotate，图像设置为scale，以便rotate和scale时间可以不同

div {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
-webkit-animation: spin 2s linear infinite;
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
-webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes scale {
100% {
transform: scale(2);
}
}

<div>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>

您不能播放两个动画，因为该属性只能定义一次。相反，你为什么不将第二个动画包含在第一个动画中，并调整关键帧以获得正确的时间?

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin-scale 4s linear infinite;
}


@-webkit-keyframes spin-scale {
50%{
transform: rotate(360deg) scale(2);
}
100% {
transform: rotate(720deg) scale(1);
}
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

博士TL;

使用逗号，你可以指定多个动画，每个动画都有自己的属性，如下面的CriticalError答案所述。

例子:

animation: rotate 1s, spin 3s;

原来的答案

这里有两个问题:

# 1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

第二行代替第一行。所以，没有效果。

＃2

这两个关键帧应用于相同的属性transform

作为一种替代方法，你可以将图像包装在<div>中，并将每个图像分别动画和以不同的速度。

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
position: absolute;
top: 100%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
animation: scale 4s infinite linear;
}


.spinner {
position: relative;
top: 150px;
animation: spin 2s infinite linear;
}




@keyframes spin {
100% {
transform: rotate(180deg);
}
}


@keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

您确实可以同时运行多个动画，但您的示例有两个问题。首先，您使用的语法只指定一个动画。第二个样式规则隐藏了第一个。你可以使用这样的语法指定两个动画:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

就像在这把小提琴中(由于下面解释的其他问题，我将“缩放”替换为“淡出”……容忍我。):http://jsfiddle.net/rwaldin/fwk5bqt6/

其次，这两个动画改变了相同DOM元素的相同CSS属性(转换)。我不相信你能做到。你可以在不同的元素上指定两个动画，比如图像和容器元素。只需将其中一个动画应用到容器，如下面的小提琴:http://jsfiddle.net/rwaldin/fwk5bqt6/2/

你可以用逗号指定多个动画——每个动画都有自己的属性。

例子:

animation: rotate 1s, spin 3s;

转动这两行:

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

成:

 -webkit-animation: spin 2s linear infinite, scale 4s linear infinite;