animation.css 3.6 KB

1
  1. @keyframes animate-top{0%{background:#8b2ef4}100%{color:#474747;transform:translateX(0px) translateY(50%) translateZ(5px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg)}}@keyframes animate-bottom{0%{color:#474747;opacity:1}100%{transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity:1}}.number{position:relative}.number span{position:absolute;display:flex;align-items:center;font-weight:bold;text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:#fff;width:100%;height:100%;perspective:7.14em;font-family:"gmarketSans" !important}.number span:before{display:block;height:50%;overflow:hidden;border-radius:20% 20% 0 0;background:#8b2ef4;padding-top:15px}.number span:after{display:block;height:50%;overflow:hidden;line-height:0 !important;border-radius:0 0 20% 20%;transition:color 100ms,background-color 100ms;background:#7f1bf2}.flip .primary:before{animation:animate-top 250ms;-moz-animation-fill-mode:forwards;-webkit-animation:animate-top 250ms;-webkit-animation-fill-mode:forwards;background:#7f1bf2}.flip .primary:after{animation:animate-bottom 250ms;-moz-animation-fill-mode:forwards;animation-delay:250ms;-webkit-animation:animate-bottom 250ms;-webkit-animation-fill-mode:forwards;-webkit-animation-delay:250ms}.primary:after{opacity:0;transform:translateX(0) translateY(0em) translateZ(0.35em) rotateX(91deg) rotateY(0deg) rotateZ(0deg)}.primary{z-index:2}.secondary{z-index:1}[data-number="0"] span.primary:before{content:"0"}[data-number="0"] span.secondary:after{content:"0"}[data-number="0"] span.secondary:before{content:attr(title)}[data-number="0"] span.primary:after{content:attr(title)}[data-number="9"] span.primary:before{content:"9"}[data-number="9"] span.secondary:after{content:"9"}[data-number="9"] span.secondary:before{content:attr(title)}[data-number="9"] span.primary:after{content:attr(title)}[data-number="8"] span.primary:before{content:"8"}[data-number="8"] span.secondary:after{content:"8"}[data-number="8"] span.secondary:before{content:attr(title)}[data-number="8"] span.primary:after{content:attr(title)}[data-number="7"] span.primary:before{content:"7"}[data-number="7"] span.secondary:after{content:"7"}[data-number="7"] span.secondary:before{content:attr(title)}[data-number="7"] span.primary:after{content:attr(title)}[data-number="6"] span.primary:before{content:"6"}[data-number="6"] span.secondary:after{content:"6"}[data-number="6"] span.secondary:before{content:attr(title)}[data-number="6"] span.primary:after{content:attr(title)}[data-number="5"] span.primary:before{content:attr(title)}[data-number="5"] span.secondary:after{content:attr(title)}[data-number="5"] span.secondary:before{content:attr(title)}[data-number="5"] span.primary:after{content:attr(title)}[data-number="4"] span.primary:before{content:"4"}[data-number="4"] span.secondary:after{content:"4"}[data-number="4"] span.secondary:before{content:attr(title)}[data-number="4"] span.primary:after{content:attr(title)}[data-number="3"] span.primary:before{content:attr(title)}[data-number="3"] span.secondary:after{content:attr(title)}[data-number="3"] span.secondary:before{content:attr(title)}[data-number="3"] span.primary:after{content:attr(title)}[data-number="2"] span.primary:before{content:"2"}[data-number="2"] span.secondary:after{content:"2"}[data-number="2"] span.secondary:before{content:attr(title)}[data-number="2"] span.primary:after{content:attr(title)}[data-number="1"] span.primary:before{content:"1"}[data-number="1"] span.secondary:after{content:"1"}[data-number="1"] span.secondary:before{content:attr(title)}[data-number="1"] span.primary:after{content:attr(title)}/*# sourceMappingURL=animation.css.map */