TL; DR
使用逗号，可以指定多个动画，每个动画都有自己的属性。
animation: rotate 1s, spin 3s;
原始答案
这里有两个问题：
＃1
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
第二行替换第一行。因此，没有任何效果。
＃2
两个关键帧都应用于相同的属性 transform
作为一种替代方法，您可以将图像包裹在中，<div>然后分别 设置动画
.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>
602392714
清零编程群