在媒体查询后面时，React Radium CSS动画不起作用

如何解决在媒体查询后面时，React Radium CSS动画不起作用

  const ImageDivState0={
    background:'-moz-radial-gradient(50% 50%,circle,transparent,#000 0%)',opacity:1,}
  const ImageDivState1={
    background:'-moz-radial-gradient(50% 50%,#000 10%)',}
  const ImageDivState2={
    background:'-moz-radial-gradient(50% 50%,#000 20%)',}
  const ImageDivState3={
    background:'-moz-radial-gradient(50% 50%,#000 30%)',}
  const ImageDivState4={
    background:'-moz-radial-gradient(50% 50%,#000 40%)',}
  const ImageDivState5= {
    background:'-moz-radial-gradient(50% 50%,#000 50%)',}
  const ImageDivState6= {
    background:'-moz-radial-gradient(50% 50%,#000 60%)',}
  const ImageDivState7= {
    background:'-moz-radial-gradient(50% 50%,#000 70%)',}
  const ImageDivState8= {
    background:'-moz-radial-gradient(50% 50%,#000 80%)',}
  const ImageDivState9= {
    background:'-moz-radial-gradient(50% 50%,#000 90%)',}
  const ImageDivState10= {
    background:'-moz-radial-gradient(50% 50%,#000 100%)',// transition:'1s',}
  const ImageDivState11={
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState12={
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState13={
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState14={
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState15={
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState16= {
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState17= {
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState18= {
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState19= {
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState20= {
    background:'-moz-radial-gradient(50% 50%,}
  const ImageDivState21= {
    background:'-moz-radial-gradient(50% 50%,}


const ImageDivAnimation=
  Radium.keyframes({
  '0%':ImageDivState0,'10%':ImageDivState1,'20%':ImageDivState2,'30%':ImageDivState3,'40%':ImageDivState4,'50%':  ImageDivState5,'60%':ImageDivState6,'70%': ImageDivState7,'80%': ImageDivState8,'90%':ImageDivState9,'100%': ImageDivState10
  })
  var ImageDivAnimation1280px=
  Radium.keyframes({
  '0%':ImageDivState11,'10%':ImageDivState12,'20%':ImageDivState13,'30%':ImageDivState14,'40%':ImageDivState15,'50%':  ImageDivState16,'60%':ImageDivState17,'70%': ImageDivState18,'80%': ImageDivState19,'90%':ImageDivState20,'100%': ImageDivState21
  })
  const ImageDivStyleAnimation={
    
    
    width: 330 + 'px',height: 329+'px',backgroundColor: 'black',zIndex: 1,right: 280+'px',position: 'absolute',borderRadius: 100+'%',bottom: 27 +'px',animation: 'x 0.5s',animationName: [ImageDivAnimation],// opacity: 'x',// transition:'x',// transition: "5s",top: 50+'%',left: 50+'%',mozTransform: 'translateX(-50%) translateY(-50%)',webkitTransform: 'translateX(-50%) translateY(-50%)',transform: 'translateX(-50%) translateY(-50%)','@media only screen and (min-width:1280px)':{
      width: 450+'px',height: 440+'px',animationName:  ImageDivAnimation1280px,},

我在React中使用Radium编写了上述CSS动画（很抱歉，代码很长，但是我试图将两种动画完全用于两种浏览器窗口大小以使其正常工作），默认浏览器大小的默认实现有效完美，但是包含媒体查询（以@media only screen和（min-width：1280px）开头）的内容无法进入浏览器，如下面的屏幕快照所示，第一个默认屏幕尺寸（没有媒体查询） ）出现动画，但是对于第二个屏幕尺寸，Radium样式对象中的x变量不会被实际动画替换。知道为什么吗？