diff --git a/README.md b/README.md index 9d094a1acd26c308f47b993c52cbbd99680233ef..dfe6f35cd74eee4a0d1e52bf4ce2b9e342234f89 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 ac095f47c664d354f6295b96b3ea16b55d187852..04b704d10019b464cb0475b739a3b54696ed9be5 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 efb4114d2f34017cafd2d10f65b12bfac5c4c44c..7e2701b67377b848c7312b25cb0283f59a12eb9f 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 505bb18829e66b94cb430b135823a2a37f448454..df87fb27f92ef779fe1cd76f4cba11223339a857 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>