howardr/index.html

## index.html
<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    .container {
      overflow: hidden;
      position: absolute;
      top: 10px;;
      width: 120px;
      height: 470px;
    }
    #css3 {
      left: 50px;
    }
    #js {
      left: 200px;
    }

    .box {
      width: 118px;
      height: 98px;
      border: 1px solid #000;
      background-color: #fff;
    }
    #css3 .box {
      -webkit-transform: translateY(470px);
      -moz-transform: translateY(470px);
    }
    #js .box {
      position: absolute;
      top: 470px;
    }
    .move {
      -webkit-transform: translateY(-120px) !important;
      -moz-transform: translateY(470px);
    }
  </style>
</head>
<body>

<div id="css3" class="container"></div>
<div id="js" class="container"></div>

<script>

var duration = 30;

// css3 animation
!function() {
  var box = $('<div />')
        .addClass('box')
        .appendTo('#css3'),
      style = box[0].style;

  style.webkitTransition = '-webkit-transform '+duration+'s linear';
  style.MozTransition = '-moz-transform 45s linear';

  setTimeout(function() {
    box.addClass('move');
  }, 0);
  setTimeout(function() {
    box.remove();
  }, duration * 1000);
}();


// js animation via jQuery
!function() {
  var box = $('<div />')
        .addClass('box')
        .appendTo('#js');

  box.animate({
    top: '-120px'
  }, {
    easing: 'linear',
    duration:  duration * 1000,
    complete: function() {
      $(this).remove();
    }
  });
}();

</script>


</body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	}
	.container {
	overflow: hidden;
	position: absolute;
	top: 10px;;
	width: 120px;
	height: 470px;
	}
	#css3 {
	left: 50px;
	}
	#js {
	left: 200px;
	}

	.box {
	width: 118px;
	height: 98px;
	border: 1px solid #000;
	background-color: #fff;
	}
	#css3 .box {
	-webkit-transform: translateY(470px);
	-moz-transform: translateY(470px);
	}
	#js .box {
	position: absolute;
	top: 470px;
	}
	.move {
	-webkit-transform: translateY(-120px) !important;
	-moz-transform: translateY(470px);
	}
	</style>
	</head>
	<body>

	<div id="css3" class="container"></div>
	<div id="js" class="container"></div>

	<script>

	var duration = 30;

	// css3 animation
	!function() {
	var box = $('<div />')
	.addClass('box')
	.appendTo('#css3'),
	style = box[0].style;

	style.webkitTransition = '-webkit-transform '+duration+'s linear';
	style.MozTransition = '-moz-transform 45s linear';

	setTimeout(function() {
	box.addClass('move');
	}, 0);
	setTimeout(function() {
	box.remove();
	}, duration * 1000);
	}();


	// js animation via jQuery
	!function() {
	var box = $('<div />')
	.addClass('box')
	.appendTo('#js');

	box.animate({
	top: '-120px'
	}, {
	easing: 'linear',
	duration: duration * 1000,
	complete: function() {
	$(this).remove();
	}
	});
	}();

	</script>


	</body>
	</html>