kdf
Version:
60 lines (52 loc) • 1.5 kB
text/stylus
@import "./kdfn"
/*
** Counter Styles
*/
.kd-counter
vendor transform-style, preserve-3d
vendor perspective, 500px
overflow visible
ul
position relative
size 50px, 50px
margin 0 0 0 3px
fl()
li
abs 0px 0 0 0px
display block
size 50px, 50px
vendor transform-style, preserve-3d
span
background #000
color #fff
font-size 26px
font-weight bold
size 50px, 25px
line-height 50px
overflow hidden
display block
text-align center
rounded 6px 6px 0 0
vendor backface-visibility, hidden
&.top
gradient #333 #000
vendor transform-origin-y, 100%
&.bottom
gradient #333 #000
line-height 0
rounded 0 0 6px 6px
vendor transform-origin-y, 0
&.animate li.real span.bottom
vendor animation, flipCounterReal .5s 1 forwards ease
&.animate li.fake span.top
vendor animation, flipCounterFake .5s 1 forwards ease
@-webkit-keyframes flipCounterReal
0%
-webkit-transform rotateX(180deg)
100%
-webkit-transform rotateX(0deg)
@-webkit-keyframes flipCounterFake
0%
-webkit-transform rotateX(0deg)
100%
-webkit-transform rotateX(-180deg)