svg圖無法同時進行透明度變化和旋轉(zhuǎn)動畫

Chrome 瀏覽器 版本 62.0.3202.94
對html中的svg圖寫css時候，
想讓圖標一邊透明度變化，一邊進行旋轉(zhuǎn)可是卻加載不出來

@keyframes swing{ 
    0%   { opacity:0 transform: rotate(0deg)    ;}
    5%   { opacity:0.1 transform: rotate(10deg)   ;}
    10%  { opacity:0.2 transform: rotate(-9deg)   ;}
    15%  { opacity:0.25 transform: rotate(8deg )   ;}
    20%  { opacity:0.30 transform: rotate(-7deg)   ;}
    25%  { opacity:0.35 transform: rotate(6deg )   ;}
    30%  { opacity:0.4 transform: rotate(-5deg)   ;}
    35%  { opacity:0.5 transform: rotate(4deg )   ;}
    40%  { opacity:0.6 transform: rotate(-3deg)   ;}
    45%  { opacity:0.75 transform: rotate(2deg)    ;}
    50%  { opacity:0.85 transform: rotate(-1deg)   ;}
    55%  { opacity:0.9 transform: rotate(0.5deg)  ;}
    60%  { opacity:0.95 transform: rotate(-1deg)   ;}
    100% { opacity:1 transform: rotate(0deg)    ;}
}
 .four {
    animation:swing 10s  ease-in-out 1s infinite;
    transform-origin: 50% 50%;
}

把其中任意一個去除，保留一個就能加載出來透明度變化或者旋轉(zhuǎn)效果
無法同時進行透明度變化和旋轉(zhuǎn)動畫