A CodePen by Stoikerty. Oranges and Lemons - A Reflow story - How to reset a CSS transition by removing and adding a class, via javascript. Reflow needs to be triggered between the class change, this is accomplished using element.offsetWidth.

index.slim

#awesome-element
  / We all like to
  | Woohoo

script.js

// where's daddy
element = document.getElementById("awesome-element");

// reset the transition by...
element.addEventListener("click", function(e){
  e.preventDefault;
  // -> removing the class
  element.classList.remove("useTransition");
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  element.offsetWidth = element.offsetWidth;
  // -> and re-adding the class
  element.classList.add("useTransition");
}, false);

// Remove all Effects when mouse isn't tickling the button anymore
element.addEventListener("mouseout", function(e){
  e.preventDefault;
  
  // I can't take this anymore! I'm leaving
  element.classList.remove("useTransition");
}, false);

style.scss

@import "compass";
/*** Oranges and Lemons demo ***
twitter.com/stoikerty
alpha.app.net/stoikerty
*/

/* How to reset a css transition by removing and adding a class via js */
/* Go all the way down to see what it's all about */

/* Credits to these young fellas */
/* http://css-tricks.com/restart-css-animation/#comment-93119 */

/* Some basics that are needed for a button */
@import "compass/css3/user-interface";
@mixin is_button{
  // change the cursor to a hand
  cursor          : pointer;
  // set text defaults
  text-decoration : none;
  vertical-align  : middle;
  // disable user selection and webkit highlight on tap
  @include user-select(none);
  -ms-user-select : none;
  -webkit-tap-highlight-color : transparent;

  // Fix for the Firefox padding issue on focus
  &::-moz-focus-inner{
    padding : 0 !important;
    margin  : -1px !important;
  }
}

/* I like this mixin, mkay */
// create a positioned Element, crossbrowser, with reset margins & paddings
@mixin position($position: absolute, $display: block, $width: "", $height: ""){
	//@include reset_element;

	/* set position */
	position : $position;
	@if $display == inline-block {
		// Internet Explorer Hack to make inline-block work
		// useful "Star HTML Selector Bug" makes this possible
		// see: http://reference.sitepoint.com/css/workaroundsfilters
		display  : inline-block;
		*display : inline;
		zoom: 1;
	}
	@else { display : $display; }
	@if $width  != "" { width  : $width;  }
	@if $height != "" { height : $height; }
}

// Some color variables
$yellow-light : lighten(#fed829, 20%);
$yellow       : #fecf06;
$yellow-dark  : #eebd01;

$orange-light : #fd9b3e;
$orange       : #fc8c1f;
$orange-dark  : #ea7e0f;

// Ok, let's polish this element
#awesome-element{
  @include is_button;
  @include position(relative, block, 200px);
  float : none;
  margin : 100px auto;
  padding : 25px 0px 31px;
  
  text-align : center;
  font-family : Palatino Linotype, Book Antiqua, Palatino, serif;
  font-size   : 30px;
  line-height : 1.5em;
  
  background-color : #f0f0f0;
  @include background-image(linear-gradient(top, #f8f8f8, #eee 80%, #ddd));
  @include box-shadow(rgba(#000, 0.2) 0px 0px 1px, rgba(#000, 0.2) 0px 0px 2px, rgba(#000, 0.06) 0px 0px 10px, inset rgba(#fff, 0.6) 0px -1px 20px, inset rgba(#fff, 0.7) 0px -1px 3px);  
  @include border-radius(10px 300px 10px 300px, 200px 50px 200px 50px);
  @include transition(border-radius 0.2s ease-out);
      
  &:hover{
    color : #222;
    @include background-image(linear-gradient(top, $yellow-light, $yellow 80%, $yellow-dark));
    //@include transition(border-radius 0.1s ease-in);
    @include border-radius(10px 300px 10px 300px, 30px 200px 30px 200px);
  }
    
  &:active{
    top : 1px;
    padding : 25px 0px 30px;
    @include background-image(linear-gradient(top, $orange-light, $orange 80%, $orange-dark));
    color : #fff;
    @include box-shadow(rgba(#000, 0.2) 0px 0px 1px, rgba(#000, 0.2) 0px 0px 2px, rgba(#000, 0.06) 0px 0px 10px, inset rgba($yellow-light, 0.9) 0px 0px 20px, inset rgba(#fff, 0.7) 0px 0px 3px);
    @include border-radius(20px 300px 20px 300px, 50px 100px 50px 100px);
    @include transition(border-radius 0.06s ease-out);
  }
}


/* I put the animation functionality down here */
// Focus on the lemons

#awesome-element{
  /* Here be magic transition-Start */
  /* This transition is reset via css */
  &:after{
    @include position(absolute, block, 100%);
    color   : #222;
    z-index : -1;
    top     : 0%;
    left    : 0;
    content : "& Lemons!";
    text-align : center;
    @include opacity(0);
  }
  /* ---- */
  
  &:before{
    @include position(absolute, block, 100%);
    color   : #222;
    z-index : -1;
    top     : 20%;
    left    : -20%;
    content : "Oranges";
    text-align : center;
    @include opacity(0);
    @include transition(
      opacity 0.5s ease-out,
      top 0.2s ease-out,
      left 0.6s ease-out
    );
  }
    
  &:hover:before{
    top     : -60%;
    left    : -70%;
    @include opacity(1);
    @include transition(
      opacity 0s ease-out,
      top 0.3s ease-out,
      left 0.1s ease-out
    );
  }
  
  &.useTransition{
    /* Here be magic transition-End */
    &:after{
      top     : -70%;
      @include transition(
          opacity 0.5s 0.2s ease-out,
          top 0.5s ease-out
      );
      @include opacity(1);
    }
    /* ---- */
        
    &:before{
      top : -84%;
      @include opacity(0.3);
      @include transition(
          opacity 0.3s 0.2s ease-out,
          top 0.3s ease-out,
          left 0.3s ease-out
      );
    }
  }
}