phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated transition styles to work with vertical centering (#70)

Browse Source
This commit is contained in:
Hakim El Hattab 2012-11-10 16:01:56 -05:00
parent dce2d35a63
commit ecac983116
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
css/reveal.css
View File

@ -525,10 +525,10 @@ body {
-ms-perspective: 600px; -ms-perspective: 600px;
perspective: 600px; perspective: 600px;
-webkit-perspective-origin: 0% -25%; -webkit-perspective-origin: 0px -100px;
-moz-perspective-origin: 0% -25%; -moz-perspective-origin: 0px -100px;
-ms-perspective-origin: 0% -25%; -ms-perspective-origin: 0px -100px;
perspective-origin: 0% -25%; perspective-origin: 0px -100px;
} }
.reveal .slides>section, .reveal .slides>section,
@ -547,19 +547,24 @@ body {
-ms-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
@ -661,15 +666,6 @@ body {
* ZOOM TRANSITION * 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 { .reveal.zoom .slides>section.past {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -747,11 +743,6 @@ body {
*********************************************/ *********************************************/
.reveal.cube .slides { .reveal.cube .slides {
-webkit-perspective-origin: 0% 25%;
-moz-perspective-origin: 0% 25%;
-ms-perspective-origin: 0% 25%;
perspective-origin: 0% 25%;
-webkit-perspective: 1300px; -webkit-perspective: 1300px;
-moz-perspective: 1300px; -moz-perspective: 1300px;
-ms-perspective: 1300px; -ms-perspective: 1300px;
@ -760,6 +751,7 @@ body {
.reveal.cube .slides section { .reveal.cube .slides section {
padding: 30px; padding: 30px;
min-height: 600px;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
@ -769,6 +761,9 @@ body {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
}
.reveal.center.cube .slides section {
min-height: auto;
} }
.reveal.cube .slides section:not(.stack):before { .reveal.cube .slides section:not(.stack):before {
content: ''; content: '';