css同时将两个动画应用于按钮

Question

我有一个按钮，目前在360度旋转半秒钟。它的css：

.progress-spinner{
    color: #FF4081;
    -webkit-animation:spin 0.5s linear 1;
    -moz-animation:spin 0.5s linear 1;
    animation: spin 0.5s linear 1;

}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我也想让这个按钮同时放大和缩小。我怎样才能实现它？我有另一个放大和缩小的动画如下：

animation-name: pop;
animation-iteration-count: 1;
animation-duration: 0.3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
    }
}

我不确定如何将它们组合在一起？