diff --git a/README.md b/README.md index 9d094a1a..dfe6f35c 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

shrink

fade-out

fade-up (also down, left and right!)

-

visible only once

+

fades in, then out when we move to the next step

+

fades in, then 50% out when we move to the next step

blue only once

highlight-red

highlight-green

diff --git a/css/reveal.css b/css/reveal.css index ac095f47..04b704d1 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 efb4114d..7e2701b6 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 505bb188..df87fb27 100644 --- a/demo.html +++ b/demo.html @@ -139,8 +139,14 @@

grow

shrink

fade-out

-

fade-up (also down, left and right!)

-

current-visible

+

+ fade-right, + up, + down, + left +

+

fade-in-then-out

+

fade-in-then-half-out

Highlight red blue green