Mercurial > ~darius > hgwebdir.cgi > iwws
view static/jqtouch.css @ 10:15fed86d9fac
Fix example to be correct.
author | Daniel O'Connor <darius@dons.net.au> |
---|---|
date | Fri, 03 Feb 2012 23:47:25 +1030 |
parents | 2d9ee2b3ae82 |
children |
line wrap: on
line source
* { margin: 0; padding: 0; } a { -webkit-tap-highlight-color: rgba(0,0,0,0); } body { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } #jqt { -webkit-text-size-adjust: none; -webkit-user-select: none; bottom: 0; font-family: "Helvetica Neue", Helvetica; left: 0; position: absolute; right: 0; top: 0; } #jqt .selectable, #jqt input, #jqt textarea { -webkit-user-select: auto; } #jqt.notransform { -webkit-transform: none !important; } #jqt > * { -webkit-box-sizing: border-box; display: none; left: 0; min-height: 100%; overflow-x: hidden; position: absolute; width: 100%; z-index: 0; } #jqt > .current { display: block !important; z-index: 10; } #jqt .in, #jqt .out { -webkit-animation-duration: 250ms; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; } #jqt .in { z-index: 10; } #jqt .out { z-index: 0 !important; } #jqt.supports3d { -webkit-perspective: 800; -webkit-transform-style: preserve-3d; } #jqt.supports3d > * { -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); } /* Fade */ #jqt .fade.in { -webkit-animation-name: fadeIn; } #jqt .fade.out { -webkit-animation-name: fadeOut; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Disolve */ #jqt .dissolve.in { -webkit-animation-name: dissolveIn; } #jqt .dissolve.out { -webkit-animation-name: dissolveOut; } @-webkit-keyframes dissolveIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes dissolveOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Pop */ #jqt .pop.in { -webkit-animation-name: popIn; } #jqt .pop.out { -webkit-animation-name: popOut; } @-webkit-keyframes popIn { 0% { -webkit-transform: scale(.2); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-webkit-keyframes popOut { 0% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(.2); opacity: 0; } } /* Slide Left */ #jqt .slideleft.in { -webkit-animation-name: slideLeftIn; } #jqt .slideleft.out { -webkit-animation-name: slideLeftOut; } @-webkit-keyframes slideLeftIn { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @-webkit-keyframes slideLeftOut { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(-100%); } } /* Slide Right */ #jqt .slideright.in { -webkit-animation-name: slideRightIn; } #jqt .slideright.out { -webkit-animation-name: slideRightOut; } @-webkit-keyframes slideRightIn { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @-webkit-keyframes slideRightOut { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(100%); } } /* Slide Up */ #jqt .slideup.in { z-index: 10; -webkit-animation-name: slideUpIn; } #jqt .slideup.out { z-index: 0; -webkit-animation-name: slideUpOut; } @-webkit-keyframes slideUpIn { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(0); } } @-webkit-keyframes slideUpOut { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(0); } } /* Slide Down */ #jqt .slidedown.in { z-index: 0; -webkit-animation-name: slideDownIn; } #jqt .slidedown.out { z-index: 10; -webkit-animation-name: slideDownOut; } @-webkit-keyframes slideDownIn { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(0); } } @-webkit-keyframes slideDownOut { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(100%); } } /* Flip Left */ #jqt .flipleft { -webkit-backface-visibility: hidden; } #jqt .flipleft.in { -webkit-animation-name: flipLeftIn; } #jqt .flipleft.out { -webkit-animation-name: flipLeftOut; } @-webkit-keyframes flipLeftIn { 0% { -webkit-transform: rotateY(180deg) scale(.8); } 100% { -webkit-transform: rotateY(0deg) scale(1); } } @-webkit-keyframes flipLeftOut { 0% { -webkit-transform: rotateY(0deg) scale(1); } 100% { -webkit-transform: rotateY(-180deg) scale(.8); } } /* Flip Right */ #jqt .flipright { -webkit-backface-visibility: hidden; } #jqt .flipright.in { -webkit-animation-name: flipRightIn; } #jqt .flipright.out { -webkit-animation-name: flipRightOut; } @-webkit-keyframes flipRightIn { 0% { -webkit-transform: rotateY(-180deg) scale(.8); } 100% { -webkit-transform: rotateY(0deg) scale(1); } } @-webkit-keyframes flipRightOut { 0% { -webkit-transform: rotateY(0deg) scale(1); } 100% { -webkit-transform: rotateY(180deg) scale(.8); } } /* Swap Right */ #jqt .swapright { -webkit-animation-duration: .7s; -webkit-transform: perspective(800); -webkit-animation-timing-function: ease-out; } #jqt .swapright.in { -webkit-animation-name: swapRightIn; } #jqt .swapright.out { -webkit-animation-name: swapRightOut; } @-webkit-keyframes swapRightIn { 0% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); opacity:0; } 35% { -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); opacity:1; } 100% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); opacity:1; } } @-webkit-keyframes swapRightOut { 0% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); opacity:1; } 35% { -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); opacity:.5; } 100% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); opacity:0; } } /* Swap Left */ #jqt .swapleft { -webkit-animation-duration: .7s; -webkit-transform: perspective(800); -webkit-animation-timing-function: ease-out; } #jqt .swapleft.in { -webkit-animation-name: swapLeftIn; } #jqt .swapleft.out { -webkit-animation-name: swapLeftOut; } @-webkit-keyframes swapLeftIn { 0% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); opacity:0; } 35% { -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); opacity:1; } 100% { opacity:1; -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); } } @-webkit-keyframes swapLeftOut { 0% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); opacity:1; } 35% { -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); opacity:.5; } 100% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); opacity:0; } } /* Cube Left */ #jqt .cubeleft { -webkit-animation-duration: .55s; } #jqt .cubeleft.in { -webkit-transform-origin: 100% 50%; -webkit-animation-name: cubeLeftIn; } #jqt .cubeleft.out { -webkit-transform-origin: 0% 50%; -webkit-animation-name: cubeLeftOut; } @-webkit-keyframes cubeLeftIn { 0% { -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5); opacity: .5; } 100% { -webkit-transform: rotateY(00deg) translateZ(0) scale(1); opacity: 1; } } @-webkit-keyframes cubeLeftOut { 0% { -webkit-transform: rotateY(0deg) translateX(0) scale(1); opacity: 1; } 100% { -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5); opacity: .5; } } /* Cube Right */ #jqt .cuberight { -webkit-animation-duration: .55s; } #jqt .cuberight.in { -webkit-transform-origin: 0% 50%; -webkit-animation-name: cubeRightIn; } #jqt .cuberight.out { -webkit-transform-origin: 100% 50%; -webkit-animation-name: cubeRightOut; } @-webkit-keyframes cubeRightIn { 0% { -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5); opacity: .5; } 100% { -webkit-transform: rotateY(0deg) translateZ(0) scale(1); opacity: 1; } } @-webkit-keyframes cubeRightOut { 0% { -webkit-transform: rotateY(0deg) translateX(0) scale(1); opacity: 1; } 100% { -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5); opacity: .5; } }