diff options
Diffstat (limited to 'css/reveal.css')
| -rw-r--r-- | css/reveal.css | 74 |
1 files changed, 60 insertions, 14 deletions
diff --git a/css/reveal.css b/css/reveal.css index d493b22..358d954 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -538,6 +538,56 @@ body { /********************************************* + * ZOOM TRANSITION + *********************************************/ + +.reveal.zoom .slides>section, +.reveal.zoom .slides>section>section { + -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.reveal.zoom .slides>section.past { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(16); + -moz-transform: scale(16); + -ms-transform: scale(16); + -o-transform: scale(16); + transform: scale(16); +} +.reveal.zoom .slides>section.future { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(0.2); + -moz-transform: scale(0.2); + -ms-transform: scale(0.2); + -o-transform: scale(0.2); + transform: scale(0.2); +} + +.reveal.zoom .slides>section>section.past { + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); +} +.reveal.zoom .slides>section>section.future { + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); +} + + +/********************************************* * LINEAR TRANSITION *********************************************/ @@ -577,12 +627,10 @@ body { *********************************************/ .reveal.cube .slides { - margin-top: -350px; - - -webkit-perspective-origin: 50% 25%; - -moz-perspective-origin: 50% 25%; - -ms-perspective-origin: 50% 25%; - perspective-origin: 50% 25%; + -webkit-perspective-origin: 0% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; -webkit-perspective: 1300px; -moz-perspective: 1300px; @@ -610,7 +658,7 @@ body { height: 100%; left: 0; top: 0; - background: #232628; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transform: translateZ( -20px ); @@ -699,12 +747,10 @@ body { *********************************************/ .reveal.page .slides { - margin-top: -350px; - - -webkit-perspective-origin: 50% 50%; - -moz-perspective-origin: 50% 50%; - -ms-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; + -webkit-perspective-origin: 0% 50%; + -moz-perspective-origin: 0% 50%; + -ms-perspective-origin: 0% 50%; + perspective-origin: 0% 50%; -webkit-perspective: 3000px; -moz-perspective: 3000px; @@ -730,7 +776,7 @@ body { height: 100%; left: 0; top: 0; - background: rgba(0,0,0,0.2); + background: rgba(0,0,0,0.1); -webkit-transform: translateZ( -20px ); -moz-transform: translateZ( -20px ); |