react-count-animation/style/count.css

A animation react component for count change

* {
    margin: 0;
    padding: 0;
}
ul, ol, li{
    list-style:none;
}
.title{
    text-align: center;
}
.exam-div{
    padding: 20px 0;
    text-align: center;
    color: cornflowerblue;
    font-size: 30px;
}
.restart-btn{
    margin-top: 50px;
    background-color: chocolate;
    color: #ffffff;
    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; /* Firefox 4 */
    -webkit-transition-timing-function: ease-out; /* Safari 和 Chrome */
    -o-transition-timing-function: ease-out; /* Opera */
}
.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(0.8, 0, 1.0, 1.0);
    -moz-transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0); /* Firefox 4 */
    -webkit-transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0); /* Safari 和 Chrome */
    -o-transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0); /* Opera */
}
.count-slide-li-tremble{
    animation: tremble 0.15s ease-in-out;
    -webkit-animation: tremble 0.15s ease-in-out;
    -moz-animation: tremble 0.15s ease-in-out;
    -o-animation: tremble 0.15s ease-in-out;
    -ms-animation: tremble 0.15s ease-in-out;
}
@keyframes tremble{
    0% {transform: rotate(0deg);}
    40% {transform: rotate(-30deg);}
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes tremble{
    0% {-webkit-transform: rotate(0deg);}
    40% {-webkit-transform: rotate(-30deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes tremble{
    0% {-moz-transform: rotate(0deg);}
    40% {-moz-transform: rotate(-30deg);}
    100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes tremble{
    0% {-ms-transform: rotate(0deg);}
    40% {-ms-transform: rotate(-30deg);}
    100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes tremble{
    0% {-o-transform: rotate(0deg);}
    40% {-o-transform: rotate(-30deg);}
    100% {-o-transform: rotate(0deg);}
}