Permalink
Browse files

Added sample style sheets for Page Transition add-on

git-svn-id: http://ourlibrary.googlecode.com/svn/trunk@120 fad0cf9c-0ac3-11df-8f06-1508ab885915
  • Loading branch information...
1 parent 1867fac commit f304dd0e22e0ffc74f94777f89c5d25d76914078 @david-mark committed Jul 31, 2010
Showing with 222 additions and 0 deletions.
  1. +108 −0 style/mylib-pagetransition-zoom.css
  2. +114 −0 style/mylib-pagetransition.css
@@ -0,0 +1,108 @@
+body {
+ visibility: hidden;
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-duration: 480ms;
+ -o-animation-timing-function: ease-in-out;
+ -o-animation-duration: 480ms;
+ -moz-animation-timing-function: ease-in-out;
+ -moz-animation-duration: 480ms
+}
+
+body.forward {
+ -webkit-animation-name: slideInRightToLeft;
+ -o-animation-name: slideInRightToLeft;
+ -moz-animation-name: slideInRightToLeft
+}
+
+body.back {
+ -webkit-animation-name: slideInLeftToRight;
+ -o-animation-name: slideInLeftToRight;
+ -moz-animation-name: slideInLeftToRight
+}
+
+body.down {
+ -webkit-animation-name: slideInTopToBottom;
+ -o-animation-name: slideInTopToBottom;
+ -moz-animation-name: slideInTopToBottom
+}
+
+body.up {
+ -webkit-animation-name: slideInBottomToTop;
+ -o-animation-name: slideInBottomToTop;
+ -moz-animation-name: slideInBottomToTop
+}
+
+@-webkit-keyframes slideInRightToLeft {
+ from { -webkit-transform: scale(.5) translateX(50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-moz-keyframes slideInRightToLeft {
+ from { -webkit-transform: scale(.5) translateX(50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-o-keyframes slideInRightToLeft {
+ from { -webkit-transform: scale(.5) translateX(50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-webkit-keyframes slideInLeftToRight {
+ from { -webkit-transform: scale(.5) translateX(-50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-moz-keyframes slideInLeftToRight {
+ from { -webkit-transform: scale(.5) translateX(-50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-o-keyframes slideInLeftToRight {
+ from { -webkit-transform: scale(.5) translateX(-50%); }
+ to { -webkit-transform: scale(1) translateX(0); }
+}
+
+@-webkit-keyframes slideInBottomToTop {
+ from { -webkit-transform: scale(.5) translateY(100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+@-moz-keyframes slideInBottomToTop {
+ from { -webkit-transform: scale(.5) translateY(100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+@-o-keyframes slideInBottomToTop {
+ from { -webkit-transform: scale(.5) translateY(100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+@-webkit-keyframes slideInTopToBottom {
+ from { -webkit-transform: scale(.5) translateY(-100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+@-moz-keyframes slideInTopToBottom {
+ from { -webkit-transform: scale(.5) translateY(-100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+@-o-keyframes slideInTopToBottom {
+ from { -webkit-transform: scale(.5) translateY(-100%); }
+ to { -webkit-transform: scale(1) translateY(0); }
+}
+
+#logo {
+ display: none
+}
+
+#learnmore {
+ float: none;
+ width: 7em
+}
+
+address, address a, address a:link, address a:visited {
+ position: static;
+ color: inherit;
+ background-color: inherit
+}
@@ -0,0 +1,114 @@
+body {
+ visibility: hidden;
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-duration: 240ms;
+ -o-animation-timing-function: ease-in-out;
+ -o-animation-duration: 240ms;
+ -moz-animation-timing-function: ease-in-out;
+ -moz-animation-duration: 240ms
+}
+
+body.forward {
+ -webkit-animation-name: slideInRightToLeft;
+ -o-animation-name: slideInRightToLeft;
+ -moz-animation-name: slideInRightToLeft
+}
+
+body.back {
+ -webkit-animation-name: slideInLeftToRight;
+ -o-animation-name: slideInLeftToRight;
+ -moz-animation-name: slideInLeftToRight
+}
+
+body.down {
+ -webkit-animation-name: slideInTopToBottom;
+ -o-animation-name: slideInTopToBottom;
+ -moz-animation-name: slideInTopToBottom;
+ -webkit-animation-duration: 360ms;
+ -o-animation-duration: 360ms;
+ -moz-animation-duration: 360ms
+}
+
+body.up {
+ -webkit-animation-name: slideInBottomToTop;
+ -o-animation-name: slideInBottomToTop;
+ -moz-animation-name: slideInBottomToTop;
+ -webkit-animation-duration: 360ms;
+ -o-animation-duration: 360ms;
+ -moz-animation-duration: 360ms
+}
+
+@-webkit-keyframes slideInRightToLeft {
+ from { -webkit-transform: translateX(100%); }
+ to { -webkit-transform: translateX(0); }
+}
+
+@-moz-keyframes slideInRightToLeft {
+ from { -moz-transform: translateX(100%); }
+ to { -moz-transform: translateX(0); }
+}
+
+@-o-keyframes slideInRightToLeft {
+ from { -o-transform: translateX(100%); }
+ to { -o-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideInLeftToRight {
+ from { -webkit-transform: translateX(-100%); }
+ to { -webkit-transform: translateX(0); }
+}
+
+@-moz-keyframes slideInLeftToRight {
+ from { -moz-transform: translateX(-100%); }
+ to { -moz-transform: translateX(0); }
+}
+
+@-o-keyframes slideInLeftToRight {
+ from { -o-transform: translateX(-100%); }
+ to { -o-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideInBottomToTop {
+ from { -webkit-transform: translateY(100%); }
+ to { -webkit-transform: translateY(0); }
+}
+
+@-moz-keyframes slideInBottomToTop {
+ from { -moz-transform: translateY(100%); }
+ to { -moz-transform: translateY(0); }
+}
+
+@-o-keyframes slideInBottomToTop {
+ from { -o-transform: translateY(100%); }
+ to { -o-transform: translateY(0); }
+}
+
+@-webkit-keyframes slideInTopToBottom {
+ from { -webkit-transform: translateY(-100%); }
+ to { -webkit-transform: translateY(0); }
+}
+
+@-moz-keyframes slideInTopToBottom {
+ from { -moz-transform: translateY(-100%); }
+ to { -moz-transform: translateY(0); }
+}
+
+@-o-keyframes slideInTopToBottom {
+ from { -o-transform: translateY(-100%); }
+ to { -o-transform: translateY(0); }
+}
+
+#logo {
+ display: none
+}
+
+#learnmore {
+ float: none;
+ width: 7em
+}
+
+address, address a, address a:link, address a:visited {
+ position: static;
+ color: inherit;
+ background-color: inherit
+}

0 comments on commit f304dd0

Please sign in to comment.