aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md3
-rw-r--r--css/reveal.css12
-rw-r--r--css/reveal.scss16
-rw-r--r--demo.html10
4 files changed, 38 insertions, 3 deletions
diff --git a/README.md b/README.md
index 9d094a1..dfe6f35 100644
--- a/README.md
+++ b/README.md
@@ -761,7 +761,8 @@ The default fragment style is to start out invisible and fade in. This style can
<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">visible only once</p>
+ <p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
+ <p class="fragment fade-in-then-half-out">fades in, then 50% out when we move to the next step</p>
<p class="fragment highlight-current-blue">blue only once</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
diff --git a/css/reveal.css b/css/reveal.css
index ac095f4..04b704d 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -127,13 +127,25 @@ body {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
+.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden; }
+ .reveal .slides section .fragment.fade-in-then-out.current-fragment,
.reveal .slides section .fragment.current-visible.current-fragment {
opacity: 1;
visibility: inherit; }
+.reveal .slides section .fragment.fade-in-then-half-out {
+ opacity: 0;
+ visibility: hidden; }
+ .reveal .slides section .fragment.fade-in-then-half-out.visible {
+ opacity: 0.5;
+ visibility: inherit; }
+ .reveal .slides section .fragment.fade-in-then-half-out.current-fragment {
+ opacity: 1;
+ visibility: inherit; }
+
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
diff --git a/css/reveal.scss b/css/reveal.scss
index efb4114..7e2701b 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -160,6 +160,7 @@ body {
}
}
+.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden;
@@ -170,6 +171,21 @@ body {
}
}
+.reveal .slides section .fragment.fade-in-then-half-out {
+ opacity: 0;
+ visibility: hidden;
+
+ &.visible {
+ opacity: 0.5;
+ visibility: inherit;
+ }
+
+ &.current-fragment {
+ opacity: 1;
+ visibility: inherit;
+ }
+}
+
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
diff --git a/demo.html b/demo.html
index 505bb18..df87fb2 100644
--- a/demo.html
+++ b/demo.html
@@ -139,8 +139,14 @@
<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>
+ <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
+ <span style="display: inline-block;" class="fragment fade-up">up, </span>
+ <span style="display: inline-block;" class="fragment fade-down">down, </span>
+ <span style="display: inline-block;" class="fragment fade-left">left</span>
+ </p>
+ <p class="fragment fade-in-then-out">fade-in-then-out</p>
+ <p class="fragment fade-in-then-half-out">fade-in-then-half-out</p>
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
</section>
</section>