react-count-animation/dist/count.min.css

A animation react component for count change

*{margin:0;padding:0}li,ol,ul{list-style:none}.title{text-align:center}.exam-div{padding:20px 0;text-align:center;color:#6495ed;font-size:30px}.restart-btn{margin-top:50px;background-color:#d2691e;color:#fff;padding:10px 20px;border-radius:5px}.count-roll-main,.count-slide-main{display:inline-block;overflow:hidden}.count-roll-ul{overflow:hidden;transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out}.count-roll-li{display:block}.count-slide-ul{position:relative;overflow:hidden}.count-slide-li{position:absolute;display:inline-block;left:100%;transition-timing-function:cubic-bezier(.8,0,1,1);-moz-transition-timing-function:cubic-bezier(.8,0,1,1);-webkit-transition-timing-function:cubic-bezier(.8,0,1,1);-o-transition-timing-function:cubic-bezier(.8,0,1,1)}.count-slide-li-tremble{animation:tremble .15s ease-in-out;-webkit-animation:tremble .15s ease-in-out;-moz-animation:tremble .15s ease-in-out;-o-animation:tremble .15s ease-in-out;-ms-animation:tremble .15s ease-in-out}@keyframes tremble{0%{transform:rotate(0)}40%{transform:rotate(-30deg)}100%{transform:rotate(0)}}@-webkit-keyframes tremble{0%{-webkit-transform:rotate(0)}40%{-webkit-transform:rotate(-30deg)}100%{-webkit-transform:rotate(0)}}@-moz-keyframes tremble{0%{-moz-transform:rotate(0)}40%{-moz-transform:rotate(-30deg)}100%{-moz-transform:rotate(0)}}@-ms-keyframes tremble{0%{-ms-transform:rotate(0)}40%{-ms-transform:rotate(-30deg)}100%{-ms-transform:rotate(0)}}@-o-keyframes tremble{0%{-o-transform:rotate(0)}40%{-o-transform:rotate(-30deg)}100%{-o-transform:rotate(0)}}