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%)',
},
我在 React 中使用 Radium 编写了上面的 CSS 动画(对不起,代码很长,但我尝试将两个浏览器窗口大小的两个动画完全分开以使其工作),默认浏览器大小的默认实现工作完美,但是一个包含媒体查询(以 @media only screen 和 (min-width:1280px) 开头)的内容不会进入浏览器,如下面的屏幕截图所示,第一个默认屏幕尺寸(没有媒体查询)动画出现,但对于第二个屏幕尺寸,来自 Radium 样式对象的 x 变量不会被实际动画替换。知道为什么吗?