CSS Transitions using Material Design Motion Guidelines - https://codepen.io/pbojinov/pen/gwVMzv

index.html

<div class="animated fadeIn cardContainer">
	<div class="card">
	  <div class="content">
		 <p>Forage kitsch Echo Park 8-bit Carles narwhal freegan irony Williamsburg bespoke artisan plaid sriracha food truck VHS.</p>
	  </div>
	</div>

	<div class="card">
	  <div class="content">
		 <p>Beard Bushwick viral cardigan bespoke umami Williamsburg YOLO Shoreditch mustache vinyl craft beer.</p>
	  </div>
	</div>

	<div class="card">
	  <div class="content">
		 <p>Marfa yr put a bird on it Brooklyn quinoa Tumblr.</p>
	  </div>
	</div>
</div>

style.sass

// This is the most common easing curve. Objects quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes.
$standard-curve: cubic-bezier(0.4, 0.0, 0.2, 1);

/*
	Deceleration curve (“Easing out”)

	Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting point.

	During deceleration, objects may scale up either in size (to 100%) or opacity (to 100%). In some cases, when objects enter the screen at 0% opacity, they may slightly shrink from a larger size upon entry.
*/
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);

/*
	Acceleration curve (“Easing in”)

	Objects leave the screen at full velocity. They do not decelerate when off-screen.

	They accelerate at the beginning of the animation and may scale down in either size (to 0%) or opacity (to 0%). In some cases, when objects leave the screen at 0% opacity, they may also slightly scale up or down in size.
*/
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);

/*
	Sharp curve
	The sharp curve is used by objects that may return to the screen at any time.

	Objects may quickly accelerate from a starting point on-screen, then quickly decelerate in a symmetrical curve to a resting point immediately off-screen. The deceleration is faster than the standard curve since it doesn't follow an exact path to the off-screen point. Objects may return from that point at any time.
*/
$sharp-curve: cubic-bezier(0.4, 0.0, 0.6, 1);

// -- end duration easing ----

body {
	background: #f2f2f2;
	font-family: monospace;
}
.cardContainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	
	margin-top: 25px;
}
.card {
	// flex: 0;
	color: #2a2a2a;
	background: #ffffff;
	box-shadow: 0 2px 2px #d6d6d6;
	border-radius: 3px;
	width: 250px;
	min-height: 250px;
	margin: 25px 25px 25px 25px;
	padding: 0 25px 0 25px;
	
	transition: background-color 0.3s $standard-curve;
	
	&:hover {
		cursor: pointer;
		background-color: #f0efef; 
		// opacity: 0.8;
	}
	
	&:active {
		box-shadow: 0 4px 6px #d1d1d1;
	}
	
	.content {
		font-size: 1.3em;
		line-height: 1.5em;
	}
}

// random css animations to test on
// taken from https://github.com/daneden/animate.css/tree/master/source
.animated {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    animation-timing-function: $ease-in;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}