Added 4 fragment transitions effect.

css/reveal.scss

@@ -137,6 +137,54 @@ html:-moz-full-screen-ancestor {
 	}
 }
 
+.reveal .slides section .fragment.fade-up {
+	opacity: 0;
+	transform: translate(0, 20%);
+	visibility: hidden;
+
+	&.visible {
+		opacity: 1;
+		transform: translate(0, 0);
+		visibility: visible;
+	}
+}
+
+.reveal .slides section .fragment.fade-down {
+	opacity: 0;
+	transform: translate(0, -20%);
+	visibility: hidden;
+
+	&.visible {
+		opacity: 1;
+		transform: translate(0, 0);
+		visibility: visible;
+	}
+}
+
+.reveal .slides section .fragment.fade-right {
+	opacity: 0;
+	transform: translate(-20%, 0);
+	visibility: hidden;
+
+	&.visible {
+		opacity: 1;
+		transform: translate(0, 0);
+		visibility: visible;
+	}
+}
+
+.reveal .slides section .fragment.fade-left {
+	opacity: 0;
+	transform: translate(20%, 0);
+	visibility: hidden;
+
+	&.visible {
+		opacity: 1;
+		transform: translate(0, 0);
+		visibility: visible;
+	}
+}
+
 .reveal .slides section .fragment.current-visible {
 	opacity: 0;
 	visibility: hidden;
@@ -1375,5 +1423,3 @@ html:-moz-full-screen-ancestor {
 .zoomed .reveal .roll span:after {
 	visibility: hidden;
 }
-
-

index.html

@@ -139,6 +139,7 @@
 						<p class="fragment grow">grow</p>
 						<p class="fragment shrink">shrink</p>
 						<p class="fragment fade-out">fade-out</p>
+						<p class="fragment fade-up">fade-up (also down, left and right!)</p>
 						<p class="fragment current-visible">current-visible</p>
 						<p class="fragment highlight-red">highlight-red</p>
 						<p class="fragment highlight-blue">highlight-blue</p>