A Pen by Anthony Williams.

Making-Odometers…-Made-Easier.markdown

Making Odometers… Made Easier

You should go here to see what I'm talking about. But it includes Sass for loops and mixins and it's really rather good, I think you'll agree.

A Pen by Anthony Williams on CodePen.

License.

style.scss

//
//  Some vars we're using
//
$default-prefixes: webkit, moz, ms, o;
$odometer-height: 28; // Use pixels, don't use the unit
$odometer-ref-height: 13; // Base pixel size (we're calculating ems)

//
//  A mixin
//
@mixin build-prefixes($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
}

// And, then...
/* 
--  Your .digit and .odometer__digits rules, simplified
*/
// All from these simple rules:
@for $digit from 0 through 9 {
    .digit#{$digit} {
        @include build-prefixes("transform", "translate3d(0, #{($odometer-height * ($digit * -1)) / $odometer-ref-height}em, 0)");
    }
}
.digitundefined {
    @include build-prefixes("transform", "translate3d(0, #{($odometer-height * -10) / $odometer-ref-height}em, 0)");
}

@for $nth-child from 2 through 6 {
    .odometer__digits:nth-child(#{$nth-child}) > li[class*="number"] {
        @include build-prefixes("transition-delay", "#{($nth-child - 1) * 250}ms");
    }
}

/* 
--  Plus a style to show the rules without me having to repeat them 
*/
//  I've manually removed this from style_output.css in case you're wondering where it went
head, style {
  display: block;
}
head * {
  display: none;
}
head style {
  margin: 2em;
  display: block;
  white-space: pre-wrap;
  color: black;
  font-family: monospace;
}

style_output.css

/* 
--  Your .digit and .odometer__digits rules, simplified
*/
.digit0 {
  -webkit-transform: translate3d(0, 0em, 0);
  -moz-transform: translate3d(0, 0em, 0);
  -ms-transform: translate3d(0, 0em, 0);
  -o-transform: translate3d(0, 0em, 0);
  transform: translate3d(0, 0em, 0);
}

.digit1 {
  -webkit-transform: translate3d(0, -2.15385em, 0);
  -moz-transform: translate3d(0, -2.15385em, 0);
  -ms-transform: translate3d(0, -2.15385em, 0);
  -o-transform: translate3d(0, -2.15385em, 0);
  transform: translate3d(0, -2.15385em, 0);
}

.digit2 {
  -webkit-transform: translate3d(0, -4.30769em, 0);
  -moz-transform: translate3d(0, -4.30769em, 0);
  -ms-transform: translate3d(0, -4.30769em, 0);
  -o-transform: translate3d(0, -4.30769em, 0);
  transform: translate3d(0, -4.30769em, 0);
}

.digit3 {
  -webkit-transform: translate3d(0, -6.46154em, 0);
  -moz-transform: translate3d(0, -6.46154em, 0);
  -ms-transform: translate3d(0, -6.46154em, 0);
  -o-transform: translate3d(0, -6.46154em, 0);
  transform: translate3d(0, -6.46154em, 0);
}

.digit4 {
  -webkit-transform: translate3d(0, -8.61538em, 0);
  -moz-transform: translate3d(0, -8.61538em, 0);
  -ms-transform: translate3d(0, -8.61538em, 0);
  -o-transform: translate3d(0, -8.61538em, 0);
  transform: translate3d(0, -8.61538em, 0);
}

.digit5 {
  -webkit-transform: translate3d(0, -10.76923em, 0);
  -moz-transform: translate3d(0, -10.76923em, 0);
  -ms-transform: translate3d(0, -10.76923em, 0);
  -o-transform: translate3d(0, -10.76923em, 0);
  transform: translate3d(0, -10.76923em, 0);
}

.digit6 {
  -webkit-transform: translate3d(0, -12.92308em, 0);
  -moz-transform: translate3d(0, -12.92308em, 0);
  -ms-transform: translate3d(0, -12.92308em, 0);
  -o-transform: translate3d(0, -12.92308em, 0);
  transform: translate3d(0, -12.92308em, 0);
}

.digit7 {
  -webkit-transform: translate3d(0, -15.07692em, 0);
  -moz-transform: translate3d(0, -15.07692em, 0);
  -ms-transform: translate3d(0, -15.07692em, 0);
  -o-transform: translate3d(0, -15.07692em, 0);
  transform: translate3d(0, -15.07692em, 0);
}

.digit8 {
  -webkit-transform: translate3d(0, -17.23077em, 0);
  -moz-transform: translate3d(0, -17.23077em, 0);
  -ms-transform: translate3d(0, -17.23077em, 0);
  -o-transform: translate3d(0, -17.23077em, 0);
  transform: translate3d(0, -17.23077em, 0);
}

.digit9 {
  -webkit-transform: translate3d(0, -19.38462em, 0);
  -moz-transform: translate3d(0, -19.38462em, 0);
  -ms-transform: translate3d(0, -19.38462em, 0);
  -o-transform: translate3d(0, -19.38462em, 0);
  transform: translate3d(0, -19.38462em, 0);
}

.digitundefined {
  -webkit-transform: translate3d(0, -21.53846em, 0);
  -moz-transform: translate3d(0, -21.53846em, 0);
  -ms-transform: translate3d(0, -21.53846em, 0);
  -o-transform: translate3d(0, -21.53846em, 0);
  transform: translate3d(0, -21.53846em, 0);
}

/* 
--  Digit Delays
*/
.odometer__digits:nth-child(2) > li[class*="number"] {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}

.odometer__digits:nth-child(3) > li[class*="number"] {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

.odometer__digits:nth-child(4) > li[class*="number"] {
  -webkit-transition-delay: 750ms;
  -moz-transition-delay: 750ms;
  -ms-transition-delay: 750ms;
  -o-transition-delay: 750ms;
  transition-delay: 750ms;
}

.odometer__digits:nth-child(5) > li[class*="number"] {
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.odometer__digits:nth-child(6) > li[class*="number"] {
  -webkit-transition-delay: 1250ms;
  -moz-transition-delay: 1250ms;
  -ms-transition-delay: 1250ms;
  -o-transition-delay: 1250ms;
  transition-delay: 1250ms;
}