Material Design

index.haml

#Grid
  -(1..25).each do |i|
    .cell

Material-Design.markdown

Material Design

Meaningful transition example *special feature in chrome

A Pen by Raphael on CodePen.

License.

script.js

/*
	Material Design - Meaningful transition
	http://www.google.com/design/spec/animation/meaningful-transitions.html
*/
 

$('.cell').each(function(i){
	var self = $(this),
		delta = self.position().top+self.position().left;

	self.css({
		'animation':'panel 4s '+delta+'ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite forwards,hue 10s infinite linear',
		'background':'rgba(50,50,100,'+(10*((delta+100)/10000))+')'
	});
});

style.stylus

#Grid
	position relative
	width 500px
	margin 0 auto
	perspective 900px	
	transform-style preserve-3d
	z-index 2
	padding-top 10px

.cell
	position relative
	margin 5px
	float left
	width calc(100px - 10px)
	height @width
	border-radius 4px
	background #333 
	box-shadow inset 0 0 0 1px black,2px 2px 2px 0 rgba(black,.5)
	transform rotateY(-45deg)
	opacity 0
	transform-origin 0 0

@keyframes panel
	0%
		transform-origin 0 0
		transform rotateY(-90deg) scale(2) translate3D(-100px,-100px,0)
		opacity 0
	30%
		transform-origin 0 0
		transform rotateY(0) scale(1) translate3D(0,0,0)
		opacity 1
	70%
		transform-origin 100% 100%
		transform rotateY(0) scale(1) translate3D(0,0,0)
		opacity 1
	100%
		transform rotateY(-90deg) scale(-1) translate3D(100px,100px,0)
		opacity 0

@keyframes hue
	0%		
		-webkit-filter hue-rotate(0deg)
	100%	   	
		-webkit-filter hue-rotate(360deg)