react 数字滑动器_css3 实现数字滚动的动画组件 （react版）

.numbers-container{width:100%;height:50px;line-height:50px;margin-top:6px;display:flex;justify-content:center;$marginTop:50px;@keyframes scrollNumber0

{

0% { margin-top:0px; }100%{margin-top:-1100;}}

@-moz-keyframes scrollNumber0/*Firefox*/

{0% { margin-top:0px; }100%{margin-top:-1100;}}

@-webkit-keyframes scrollNumber0/*Safari 和 Chrome*/

{0% { margin-top:0px; }100%{margin-top:-1100;}}

@-o-keyframes scrollNumber0/*Opera*/

{0% { margin-top:0px; }100%{margin-top:-1100;}}

//

@keyframes scrollNumber1{0% { margin-top:0px; }100%{margin-top:-1 * $marginTop;}}

@-moz-keyframes scrollNumber1/*Firefox*/

{0% { margin-top:0px; }100%{margin-top:-1 * $marginTop;}}

@-webkit-keyframes scrollNumber1/*Safari 和 Chrome*/

{0% { margin-top:0px; }100%{margin-top:-1 * $marginTop;}}

@-o-keyframes scrollNumber1/*Opera*/

{0% { margin-top:0px; }100%{margin-top:-2 * $marginTop;}}

//

@keyframes scrollNumber2{0% { margin-top:0px; }100%{margin-top:-2 * $marginTop;}}

@-moz-keyframes scrollNumber2/*Firefox*/

{0% { margin-top:0px; }100%{margin-top:-2 * $marginTop;}}

@-webkit-keyframes scrollNumber2/*Safari 和 Chrome*/

{0% { margin-top:0px; }100%{margin-top:-2 * $marginTop;}}

@-o-keyframes scrollNumber2/*Opera*/

{0% { margin-top:0px; }100%{margin-top:-2 * $marginTop;}}

@keyframes scrollNumber3{0% { margin-top:0px; }100%{margin-top:-3 * $marginTop;}}

@-moz-keyframes scrollNumber3/*Firefox*/

{0% { margin-top:0px; }100%{margin-top:-3 * $marginTop;}}

@-webkit-keyframes scrollNum