是否可以使这两个CSS动画相互配合？

我在同一元素中有两个CSS动画，它们彼此冲突。我看过其他答案，说如果它们用逗号分隔，则可以分配多个动画，但是这些示例用于速记动画分配。是否有任何方法可以使这两个动画协同工作？：

.whiteLayer{
-webkit-transform: scale(0);
transform: scale(0);
margin-top: 50px;
border-radius: 50%;
width: 475px;
height: 475px;
border: 1px dashed white;
position: absolute;
top: 12px;
margin-left: 8px;
-webkit-animation-name: spin;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-animation-delay: 2s;
animation-name: spin;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 2s;


-webkit-animation-name: intro;
-webkit-animation-duration: .2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: .2s;
-webkit-animation-fill-mode:forwards;
animation-name: intro;
animation-duration: .2s;
animation-timing-function: linear;
animation-delay: .2s;
animation-fill-mode:forwards;


}

@-webkit-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes intro{
from {transform: scale(0);}
to {transform: scale(1);}
}

@keyframes intro {
from {transform: scale(0);}
to {transform: scale(1);}

请告诉我。谢谢！