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

This commit is contained in:
Hakim El Hattab 2012-11-10 16:01:56 -05:00
parent dce2d35a63
commit ecac983116

View file

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