React Radium CSS Animation not working when behind media query

Question

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


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",
    position: 'absolute',
    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',
      backgroundColor: 'black',
      zIndex: 1,
      right: 280+'px',
          position: 'absolute',
      borderRadius: 100+'%',
      bottom: 27 +'px',
      animation: 'x 0.5s',
      animationName:  ImageDivAnimation1280px,
      
      // transition:'x',
      position: 'absolute',    
      top: 50+'%',
      left: 50+'%',
      mozTransform: 'translateX(-50%) translateY(-50%)',
      webkitTransform: 'translateX(-50%) translateY(-50%)',
      transform: 'translateX(-50%) translateY(-50%)',
      },

I wrote the above CSS animation using Radium in React (sorry the code is very long but I tried to totally separate the two animations for the two browser window sizes to make it work), the default implementation for the default browser size works perfectly but the one including a media query (starting with @media only screen and (min-width:1280px)) doesn't get to the browser, as you can see in the screenshot below for the first default screen size (without media query) the animation appears but for the second screen size the x variable from the Radium style object is not replaced by the actual animation. Any idea why?