Browse Source

support for varied transitions between slides (#39)

embed
Hakim El Hattab 12 years ago
parent
commit
46023602d2
  1. 18
      css/reveal.css
  2. 2
      css/reveal.min.css

18
css/reveal.css

@ -615,6 +615,7 @@ body {
* DEFAULT TRANSITION
*********************************************/
.reveal .slides>section[data-transition=default].past,
.reveal .slides>section.past {
display: block;
opacity: 0;
@ -624,6 +625,7 @@ body {
-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 .slides>section.future {
display: block;
opacity: 0;
@ -634,6 +636,7 @@ body {
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
.reveal .slides>section>section[data-transition=default].past,
.reveal .slides>section>section.past {
display: block;
opacity: 0;
@ -643,6 +646,7 @@ body {
-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 .slides>section>section.future {
display: block;
opacity: 0;
@ -658,12 +662,14 @@ body {
* CONCAVE TRANSITION
*********************************************/
.reveal .slides>section[data-transition=concave].past,
.reveal.concave .slides>section.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=concave].future,
.reveal.concave .slides>section.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);
@ -671,12 +677,14 @@ body {
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.reveal .slides>section>section[data-transition=concave].past,
.reveal.concave .slides>section>section.past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
.reveal .slides>section>section[data-transition=concave].future,
.reveal.concave .slides>section>section.future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@ -689,6 +697,7 @@ body {
* ZOOM TRANSITION
*********************************************/
.reveal .slides>section[data-transition=zoom].past,
.reveal.zoom .slides>section.past {
opacity: 0;
visibility: hidden;
@ -699,6 +708,7 @@ body {
-o-transform: scale(16);
transform: scale(16);
}
.reveal .slides>section[data-transition=zoom].future,
.reveal.zoom .slides>section.future {
opacity: 0;
visibility: hidden;
@ -710,6 +720,7 @@ body {
transform: scale(0.2);
}
.reveal .slides>section>section[data-transition=zoom].past,
.reveal.zoom .slides>section>section.past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
@ -717,6 +728,7 @@ body {
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.reveal .slides>section>section[data-transition=zoom].future,
.reveal.zoom .slides>section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
@ -730,6 +742,7 @@ body {
* LINEAR TRANSITION
*********************************************/
.reveal .slides>section[data-transition=linear].past,
.reveal.linear .slides>section.past {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
@ -737,6 +750,7 @@ body {
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.reveal .slides>section[data-transition=linear].future,
.reveal.linear .slides>section.future {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
@ -745,6 +759,7 @@ body {
transform: translate(150%, 0);
}
.reveal .slides>section>section[data-transition=linear].past,
.reveal.linear .slides>section>section.past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
@ -752,6 +767,7 @@ body {
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.reveal .slides>section>section[data-transition=linear].future,
.reveal.linear .slides>section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
@ -998,6 +1014,7 @@ body {
* FADE TRANSITION
*********************************************/
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section,
.reveal.fade .slides>section>section {
-webkit-transform: none;
@ -1030,6 +1047,7 @@ body {
* NO TRANSITION
*********************************************/
.reveal .slides section[data-transition=none],
.reveal.none .slides section {
-webkit-transform: none;
-moz-transform: none;

2
css/reveal.min.css

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save