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
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 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 @@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