diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 753fff3..13f3e40 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -268,3 +268,22 @@
 	fill: #6949D7;
 	background-color: #6949D7;
 }
+
+
+@-webkit-keyframes pending {
+	from {
+		opacity: 1.0;
+	}
+	to {
+		opacity: 0.5;
+	}
+}
+
+.pending {
+	-webkit-animation-name: pending;
+	-webkit-animation-duration: .5s;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: 10;
+}
+
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 92dd37e..3d21b01 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -394,11 +394,13 @@
 		if (data.state == 'ACTIVE') {
 			var prompt = 'Deactivate ' + data.dpid + '?';
 			if (confirm(prompt)) {
+				d3.select(document.getElementById(data.dpid)).select('circle').classed('pending', true);
 				switchDown(data);
 			}
 		} else {
 			var prompt = 'Activate ' + data.dpid + '?';
 			if (confirm(prompt)) {
+				d3.select(document.getElementById(data.dpid)).select('circle').classed('pending', true);
 				switchUp(data);
 			}
 		}
@@ -464,11 +466,20 @@
 			.data(data, function (data) {
 				return data.dpid;
 			});
-		nodes.select('circle').attr('class', function (data, i)  {
+		nodes.select('circle')
+			.each(function (data) {
+				// if there's a pending state changed and then the state changes, clear the pending class
+				var circle = d3.select(this);
+				if (data.state === 'ACTIVE' && circle.classed('inactive') ||
+					data.state === 'INACTIVE' && circle.classed('active')) {
+					circle.classed('pending', false);
+				}
+			})
+			.attr('class', function (data)  {
 				if (data.state === 'ACTIVE' && data.controller) {
-					return data.className + ' ' + controllerColorMap[data.controller];
+					return data.className + ' active ' + controllerColorMap[data.controller];
 				} else {
-					return data.className + ' ' + 'colorInactive';
+					return data.className + ' inactive ' + 'colorInactive';
 				}
 			});
 	}