Merge branch 'fragments' of https://github.com/kewitz/reveal.js into dev

css/reveal.css

@@ -110,6 +110,26 @@ html:-moz-full-screen-ancestor {
   .reveal .slides section .fragment.strike.visible {
     text-decoration: line-through; }
 
+.reveal .slides section .fragment.fade-up {
+  transform: translate(0, 20%); }
+  .reveal .slides section .fragment.fade-up.visible {
+    transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-down {
+  transform: translate(0, -20%); }
+  .reveal .slides section .fragment.fade-down.visible {
+    transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-right {
+  transform: translate(-20%, 0); }
+  .reveal .slides section .fragment.fade-right.visible {
+    transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-left {
+  transform: translate(20%, 0); }
+  .reveal .slides section .fragment.fade-left.visible {
+    transform: translate(0, 0); }
+
 .reveal .slides section .fragment.current-visible {
   opacity: 0;
   visibility: hidden; }

css/reveal.scss

@@ -137,6 +137,38 @@ html:-moz-full-screen-ancestor {
 	}
 }
 
+.reveal .slides section .fragment.fade-up {
+	transform: translate(0, 20%);
+
+	&.visible {
+		transform: translate(0, 0);
+	}
+}
+
+.reveal .slides section .fragment.fade-down {
+	transform: translate(0, -20%);
+
+	&.visible {
+		transform: translate(0, 0);
+	}
+}
+
+.reveal .slides section .fragment.fade-right {
+	transform: translate(-20%, 0);
+
+	&.visible {
+		transform: translate(0, 0);
+	}
+}
+
+.reveal .slides section .fragment.fade-left {
+	transform: translate(20%, 0);
+
+	&.visible {
+		transform: translate(0, 0);
+	}
+}
+
 .reveal .slides section .fragment.current-visible {
 	opacity: 0;
 	visibility: hidden;
@@ -1375,5 +1407,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>