Stumble button

CSS3 animation: progressbar effect

by sas_sam

HTML

<div class="button stumble">
    <div class="icon stumble loading">
        <div class="loader"></div>
        <div class="text">Stumble</div>
    </div>
</div>

SCSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

.button {
  float: left;
  cursor: pointer;
  width: 55px;
  height: 38px;
  -webkit-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
  margin-top: 7px;
}

.button.stumble {
  width: 130px;
}

.icon.stumble {
    height: 31px;
    line-height: 31px;
    color: #fff;
    font-size: 18px;
    background: #eb4924;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: absolute;
    width: 130px;
    overflow: hidden;
    border: 1px solid transparent;
    
    div {
        position: absolute;
        width: 100%;
        height: 31px;
        line-height: 30px;
    }

    .text {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
        font-family: "proxima_nova_ltsemibold", sans-serif;
        text-align: center;
    }
    
    .loader {
        background: #a43319;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3d(-130px, 0, 0);
        -moz-transform: translate3d(-130px, 0, 0);
        -o-transform: translate3d(-130px, 0, 0);
        -ms-transform: translate3d(-130px, 0, 0);
        transform: translate3d(-130px, 0, 0);
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
    }
    
    &.loading .loader {
      -webkit-animation-name: stumble-button;
      -moz-animation-name: stumble-button;
      -o-animation-name: stumble-button;
     ...