/* * jQuery Mobile Framework * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ .spin { -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } /* -- transitions from jQtouch - to be modified, renamed, removed, where needed */ .in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; } .slide.in { -webkit-animation-name: slideinfromright; } .slide.out { -webkit-animation-name: slideouttoleft; } .slide.in.reverse { -webkit-animation-name: slideinfromleft; } .slide.out.reverse { -webkit-animation-name: slideouttoright; } .slideup.in { -webkit-animation-name: slideinfrombottom; z-index: 10; } .slideup.out { -webkit-animation-name: dontmove; z-index: 0; } .slideup.out.reverse { z-index: 10; -webkit-animation-name: slideouttobottom; } .slideup.in.reverse { z-index: 0; -webkit-animation-name: dontmove; } .slidedown.in { -webkit-animation-name: slideinfromtop; z-index: 10; } .slidedown.out { -webkit-animation-name: dontmove; z-index: 0; } .slidedown.out.reverse { z-index: 10; -webkit-animation-name: slideouttotop; } .slidedown.in.reverse { z-index: 0; -webkit-animation-name: dontmove; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes slideinfromleft { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } } @-webkit-keyframes slideouttoright { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100%); } } @-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } } @-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @-webkit-keyframes slideouttobottom { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } @-webkit-keyframes slideouttotop { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-100%); } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .fade.in { z-index: 10; -webkit-animation-name: fadein; } .fade.out { z-index: 0; -webkit-animation-name: fadeout; } .flip { -webkit-animation-duration: .65s; } .flip.in { -webkit-animation-name: flipinfromleft; } .flip.out { -webkit-animation-name: flipouttoleft; } /* Shake it all about */ .flip.in.reverse { -webkit-animation-name: flipinfromright; } .flip.out.reverse { -webkit-animation-name: flipouttoright; } @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } @-webkit-keyframes flipinfromleft { from { -webkit-transform: rotateY(180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(-180deg) scale(.8); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(180deg) scale(.8); } } /* dontmove is used for elements that stay still but still need a complete callback */ @-webkit-keyframes dontmove { from { opacity: 1; } to { opacity: 1; } } .pop { -webkit-transform-origin: 50% 50%; } .pop.in { -webkit-animation-name: popin; z-index: 10; } .pop.out.reverse { -webkit-animation-name: popout; z-index: 10; } .pop.in.reverse { z-index: 0; -webkit-animation-name: dontmove; } @-webkit-keyframes popin { from { -webkit-transform: scale(.2); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } } @-webkit-keyframes popout { from { -webkit-transform: scale(1); opacity: 1; } to { -webkit-transform: scale(.2); opacity: 0; } }