svg图无法同时进行透明度变化和旋转动画

Question

Chrome 浏览器 版本 62.0.3202.94
对html中的svg图写css时候，
想让图标一边透明度变化，一边进行旋转可是却加载不出来

@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%;
}

把其中任意一个去除，保留一个就能加载出来透明度变化或者旋转效果
无法同时进行透明度变化和旋转动画

Answer 1

opacity:1 ;transform: rotate(0deg)
没加分号？？？？测试可以