diff options
| author | Hakim El Hattab <hakim@squarespace.com> | 2013-06-04 20:15:19 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim@squarespace.com> | 2013-06-04 20:15:19 +0200 |
| commit | 15f24f7a9a4b9629b3d6054bd0ef199eaee8c4c6 (patch) | |
| tree | 4abc3a7afc0d4b0397a742f22f6983636ed08583 /css/reveal.css | |
| parent | c11e8f624f34729363cc35d5a083476c356e824a (diff) | |
| download | fosdem-2018-presentation-15f24f7a9a4b9629b3d6054bd0ef199eaee8c4c6.tar fosdem-2018-presentation-15f24f7a9a4b9629b3d6054bd0ef199eaee8c4c6.tar.gz | |
linear sliding transition option for full page backgrounds (#453)
Diffstat (limited to 'css/reveal.css')
| -rw-r--r-- | css/reveal.css | 71 |
1 files changed, 55 insertions, 16 deletions
diff --git a/css/reveal.css b/css/reveal.css index 69a337d..8a51750 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1321,30 +1321,69 @@ body { background-repeat: no-repeat; background-size: cover; - -webkit-transition: all 800ms ease; - -moz-transition: all 800ms ease; - -ms-transition: all 800ms ease; - -o-transition: all 800ms ease; - transition: all 800ms ease; + -webkit-transition: all 650ms ease; + -moz-transition: all 650ms ease; + -ms-transition: all 650ms ease; + -o-transition: all 650ms ease; + transition: all 650ms ease; } .reveal>.background div.present { opacity: 1; visibility: visible; } +/* Linear sliding transition style */ +.reveal[data-background-transition=linear]>.background div { + opacity: 1; -/* Global transition speed settings */ -.reveal[data-transition-speed="fast"] .background div { - -webkit-transition-duration: 400ms; - -moz-transition-duration: 400ms; - -ms-transition-duration: 400ms; - transition-duration: 400ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; } -.reveal[data-transition-speed="slow"] .background div { - -webkit-transition-duration: 1200ms; - -moz-transition-duration: 1200ms; - -ms-transition-duration: 1200ms; - transition-duration: 1200ms; + .reveal[data-background-transition=linear]>.background div.past { + -webkit-transform: translate(-100%, 0); + -moz-transform: translate(-100%, 0); + -ms-transform: translate(-100%, 0); + -o-transform: translate(-100%, 0); + transform: translate(-100%, 0); + } + .reveal[data-background-transition=linear]>.background div.future { + -webkit-transform: translate(100%, 0); + -moz-transform: translate(100%, 0); + -ms-transform: translate(100%, 0); + -o-transform: translate(100%, 0); + transform: translate(100%, 0); + } + + .reveal[data-background-transition=linear]>.background div>div.past { + -webkit-transform: translate(0, -100%); + -moz-transform: translate(0, -100%); + -ms-transform: translate(0, -100%); + -o-transform: translate(0, -100%); + transform: translate(0, -100%); + } + .reveal[data-background-transition=linear]>.background div>div.future { + -webkit-transform: translate(0, 100%); + -moz-transform: translate(0, 100%); + -ms-transform: translate(0, 100%); + -o-transform: translate(0, 100%); + transform: translate(0, 100%); + } + + +/* Global transition speed settings */ +.reveal[data-transition-speed="fast"]>.background div { + -webkit-transition-duration: 300ms; + -moz-transition-duration: 300ms; + -ms-transition-duration: 300ms; + transition-duration: 300ms; +} +.reveal[data-transition-speed="slow"]>.background div { + -webkit-transition-duration: 900ms; + -moz-transition-duration: 900ms; + -ms-transition-duration: 900ms; + transition-duration: 900ms; } |