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 ><img src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120"><div>
