TL; DR

С запятой вы можете указать несколько анимаций, каждый со своими собственными свойствами.

Пример:

animation: rotate 1s, spin 3s;

Оригинальный ответ

Здесь есть две проблемы:

# 1

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

Вторая строка заменяет первую. Таким образом, эффект не имеет эффекта.

# 2

Оба ключевых кадра применяются к одному и тому же свойству transform

. В качестве альтернативы вы могли бы обернуть изображение в

.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);
    }
}