diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2014-04-06 11:04:58 +0200 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2014-04-06 11:04:58 +0200 |
commit | a3d4afeeed1aec725a42cb404e62f89739c8faa3 (patch) | |
tree | a3c39d1e8745d95b889d3a414888922e0c2ede6b /css | |
parent | c87d7db93064bac472e1cc80bee28c4dcc92565b (diff) | |
download | fosdem-2018-presentation-a3d4afeeed1aec725a42cb404e62f89739c8faa3.tar fosdem-2018-presentation-a3d4afeeed1aec725a42cb404e62f89739c8faa3.tar.gz |
better transition names, fix background images in vertical slides
Diffstat (limited to 'css')
-rw-r--r-- | css/reveal.css | 123 |
1 files changed, 71 insertions, 52 deletions
diff --git a/css/reveal.css b/css/reveal.css index 548aecc..8022b1e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -683,18 +683,79 @@ body { /********************************************* - * DEFAULT TRANSITION + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +.reveal.slide section. +.reveal.linear section { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} + +.reveal .slides>section[data-transition=slide].past, +.reveal.slide .slides>section:not([data-transition]).past, +.reveal .slides>section[data-transition=linear].past, +.reveal.linear .slides>section:not([data-transition]).past { + -webkit-transform: translate(-150%, 0); + -moz-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + -o-transform: translate(-150%, 0); + transform: translate(-150%, 0); +} +.reveal .slides>section[data-transition=slide].future, +.reveal.slide .slides>section:not([data-transition]).future, +.reveal .slides>section[data-transition=linear].future, +.reveal.linear .slides>section:not([data-transition]).future { + -webkit-transform: translate(150%, 0); + -moz-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + -o-transform: translate(150%, 0); + transform: translate(150%, 0); +} + +.reveal .slides>section>section[data-transition=slide].past, +.reveal.slide .slides>section>section:not([data-transition]).past, +.reveal .slides>section>section[data-transition=linear].past, +.reveal.linear .slides>section>section:not([data-transition]).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 .slides>section>section[data-transition=slide].future, +.reveal.slide .slides>section>section:not([data-transition]).future, +.reveal .slides>section>section[data-transition=linear].future, +.reveal.linear .slides>section>section:not([data-transition]).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%); +} + + +/********************************************* + * CONVEX TRANSITION + * Aliased 'default' for backwards compatibility *********************************************/ .reveal .slides>section[data-transition=default].past, -.reveal.default .slides>section:not([data-transition]).past { +.reveal.default .slides>section:not([data-transition]).past, +.reveal .slides>section[data-transition=convex].past, +.reveal.convex .slides>section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } .reveal .slides>section[data-transition=default].future, -.reveal.default .slides>section:not([data-transition]).future { +.reveal.default .slides>section:not([data-transition]).future, +.reveal .slides>section[data-transition=convex].future, +.reveal.convex .slides>section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); @@ -702,14 +763,18 @@ body { } .reveal .slides>section>section[data-transition=default].past, -.reveal.default .slides>section>section:not([data-transition]).past { +.reveal.default .slides>section>section:not([data-transition]).past, +.reveal .slides>section>section[data-transition=convex].past, +.reveal.convex .slides>section>section:not([data-transition]).past { -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } .reveal .slides>section>section[data-transition=default].future, -.reveal.default .slides>section>section:not([data-transition]).future { +.reveal.default .slides>section>section:not([data-transition]).future, +.reveal .slides>section>section[data-transition=convex].future, +.reveal.convex .slides>section>section:not([data-transition]).future { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); @@ -803,52 +868,6 @@ body { /********************************************* - * LINEAR TRANSITION - *********************************************/ - -.reveal.linear section { - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} - -.reveal .slides>section[data-transition=linear].past, -.reveal.linear .slides>section:not([data-transition]).past { - -webkit-transform: translate(-150%, 0); - -moz-transform: translate(-150%, 0); - -ms-transform: translate(-150%, 0); - -o-transform: translate(-150%, 0); - transform: translate(-150%, 0); -} -.reveal .slides>section[data-transition=linear].future, -.reveal.linear .slides>section:not([data-transition]).future { - -webkit-transform: translate(150%, 0); - -moz-transform: translate(150%, 0); - -ms-transform: translate(150%, 0); - -o-transform: translate(150%, 0); - transform: translate(150%, 0); -} - -.reveal .slides>section>section[data-transition=linear].past, -.reveal.linear .slides>section>section:not([data-transition]).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 .slides>section>section[data-transition=linear].future, -.reveal.linear .slides>section>section:not([data-transition]).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%); -} - - -/********************************************* * CUBE TRANSITION *********************************************/ @@ -1360,7 +1379,7 @@ body { transition: none; } -/* 2D slide */ +/* Slide */ .reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal>.backgrounds .slide-background[data-background-transition=slide] { opacity: 1; |