mgrandrath/style.css

## style.css
.hidden {
  display: none;
}

.visible,
.invisible.fade-in {
  opacity: 1;
  -webkit-transform: translateX(0);
}

.invisible,
.visible.fade-out {
  opacity: 0;
  -webkit-transform: translateX(-50px);
}

.container {
  margin-top: 5em;
  margin-left: 3em;
  width: 200px;
  height: 40px;
  background-color: #999;

  transition-property: all;
  transition-duration: 250ms, 400ms;
  transition-timing-function: ease-out;
}

## transition.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Transition</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button id="toggle">Fade</button>
    <div id="target" class="container hidden"></div>

    <script src="transition.js"></script>
  </body>
</html>

## transition.js
var feature = (function () {

  function supportsTransitions() {
    var body,
        style,
        transition,
        vendorPrefixes,
        i;

    body = document.body || document.documentElement;
    style = body.style;
    transition = "transition";

    if (typeof style[transition] === "string") {
      return true;
    }

    vendorPrefixes = ["Webkit", "Moz", "O", "ms"];
    transition = transition.charAt(0).toUpperCase() + transition.substr(1);

    for (i = 0; i < vendorPrefixes.length; i += 1) {
      if (typeof style[vendorPrefixes[i] + transition] === "string") {
        return true;
      }
    }

    return false;
  }

})();


var CssTransition = (function () {
  "use strict";

  var TRANSITION_END = "transitionend",
      NOOP = function () {};

  function runAnimated(callback) {
    var self = this,
        domNode = self._domNode;

    if (self.isAnimating()) {
      return;
    }

    function finalize() {
      domNode.removeEventListener(TRANSITION_END, finalize);
      self._finish(domNode);
      self._isAnimating = false;
      if (typeof callback === "function") {
        callback();
      }
    }
    domNode.addEventListener(TRANSITION_END, finalize);

    self._isAnimating = true;
    self._setup(domNode);
    setTimeout(function () { self._run(domNode); }, 0);
  }

  function runFallback(callback) {
    var self = this,
        domNode = self._domNode;

    self._setup(domNode);
    self._run(domNode);
    self._finish(domNode);
    if (typeof callback === "function") {
      callback();
    }
  }


  function CssTransition(domNode, setup, run, finish) {
    this._domNode = domNode;
    this._setup = setup || NOOP;
    this._run = run || NOOP;
    this._finish = finish || NOOP;
    this._isAnimating = false;
  }

  // check for browser support and assign the appropriate function
  CssTransition.prototype.run = runAnimated;
  // CssTransition.prototype.run = runFallback;

  CssTransition.prototype.isAnimating = function () {
    return this._isAnimating;
  };

  return CssTransition;

})();


(function () {
  "use strict";

  var btnToggle = getBtnToggle(),
      target = getTarget(),
      isHidden = target.classList.contains("hidden");

  function setupFadeIn(domNode) {
    domNode.classList.add("invisible");
    domNode.classList.remove("hidden");
  }

  function setupFadeOut(domNode) {
    domNode.classList.add("visible");
  }

  function runFadeIn(domNode) {
    domNode.classList.add("fade-in");
  }

  function runFadeOut(domNode) {
    domNode.classList.add("fade-out");
  }

  function finish(domNode) {
    domNode.classList.remove("invisible", "visible", "fade-in", "fade-out");
    isHidden || domNode.classList.add("hidden");
    isHidden = !isHidden;
  }

  var fadeIn = new CssTransition(target, setupFadeIn, runFadeIn, finish);
  var fadeOut = new CssTransition(target, setupFadeOut, runFadeOut, finish);

  btnToggle.addEventListener("click", onClick, false);

  // --------------------------------------------------
  // Event handlers
  // --------------------------------------------------
  function onClick() {
    if (isHidden) {
      fadeIn.run();
    }
    else {
      fadeOut.run();
    }
  }

  // --------------------------------------------------
  // Helpers
  // --------------------------------------------------
  function getBtnToggle() {
    return byId("toggle");
  }

  function getTarget() {
    return byId("target");
  }

  function byId(id) {
    return document.getElementById(id);
  }

})();
	.hidden {
	display: none;
	}

	.visible,
	.invisible.fade-in {
	opacity: 1;
	-webkit-transform: translateX(0);
	}

	.invisible,
	.visible.fade-out {
	opacity: 0;
	-webkit-transform: translateX(-50px);
	}

	.container {
	margin-top: 5em;
	margin-left: 3em;
	width: 200px;
	height: 40px;
	background-color: #999;

	transition-property: all;
	transition-duration: 250ms, 400ms;
	transition-timing-function: ease-out;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Transition</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<button id="toggle">Fade</button>
	<div id="target" class="container hidden"></div>

	<script src="transition.js"></script>
	</body>
	</html>
	var feature = (function () {

	function supportsTransitions() {
	var body,
	style,
	transition,
	vendorPrefixes,
	i;

	body = document.body \|\| document.documentElement;
	style = body.style;
	transition = "transition";

	if (typeof style[transition] === "string") {
	return true;
	}

	vendorPrefixes = ["Webkit", "Moz", "O", "ms"];
	transition = transition.charAt(0).toUpperCase() + transition.substr(1);

	for (i = 0; i < vendorPrefixes.length; i += 1) {
	if (typeof style[vendorPrefixes[i] + transition] === "string") {
	return true;
	}
	}

	return false;
	}

	})();


	var CssTransition = (function () {
	"use strict";

	var TRANSITION_END = "transitionend",
	NOOP = function () {};

	function runAnimated(callback) {
	var self = this,
	domNode = self._domNode;

	if (self.isAnimating()) {
	return;
	}

	function finalize() {
	domNode.removeEventListener(TRANSITION_END, finalize);
	self._finish(domNode);
	self._isAnimating = false;
	if (typeof callback === "function") {
	callback();
	}
	}
	domNode.addEventListener(TRANSITION_END, finalize);

	self._isAnimating = true;
	self._setup(domNode);
	setTimeout(function () { self._run(domNode); }, 0);
	}

	function runFallback(callback) {
	var self = this,
	domNode = self._domNode;

	self._setup(domNode);
	self._run(domNode);
	self._finish(domNode);
	if (typeof callback === "function") {
	callback();
	}
	}


	function CssTransition(domNode, setup, run, finish) {
	this._domNode = domNode;
	this._setup = setup \|\| NOOP;
	this._run = run \|\| NOOP;
	this._finish = finish \|\| NOOP;
	this._isAnimating = false;
	}

	// check for browser support and assign the appropriate function
	CssTransition.prototype.run = runAnimated;
	// CssTransition.prototype.run = runFallback;

	CssTransition.prototype.isAnimating = function () {
	return this._isAnimating;
	};

	return CssTransition;

	})();


	(function () {
	"use strict";

	var btnToggle = getBtnToggle(),
	target = getTarget(),
	isHidden = target.classList.contains("hidden");

	function setupFadeIn(domNode) {
	domNode.classList.add("invisible");
	domNode.classList.remove("hidden");
	}

	function setupFadeOut(domNode) {
	domNode.classList.add("visible");
	}

	function runFadeIn(domNode) {
	domNode.classList.add("fade-in");
	}

	function runFadeOut(domNode) {
	domNode.classList.add("fade-out");
	}

	function finish(domNode) {
	domNode.classList.remove("invisible", "visible", "fade-in", "fade-out");
	isHidden \|\| domNode.classList.add("hidden");
	isHidden = !isHidden;
	}

	var fadeIn = new CssTransition(target, setupFadeIn, runFadeIn, finish);
	var fadeOut = new CssTransition(target, setupFadeOut, runFadeOut, finish);

	btnToggle.addEventListener("click", onClick, false);

	// --------------------------------------------------
	// Event handlers
	// --------------------------------------------------
	function onClick() {
	if (isHidden) {
	fadeIn.run();
	}
	else {
	fadeOut.run();
	}
	}

	// --------------------------------------------------
	// Helpers
	// --------------------------------------------------
	function getBtnToggle() {
	return byId("toggle");
	}

	function getTarget() {
	return byId("target");
	}

	function byId(id) {
	return document.getElementById(id);
	}

	})();