本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.8节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
假使需要不同的动画，而不是在前面的示例中提供的默认动画集，你可以引进自定义的动画。你可以使用CSS3变换（CSS3 transition）来创建平滑的硬件加速动画，包含2D和3D。
代码清单9-9提供了一个示例动画：打开新页面时旋转页面。
代码清单9-9 使用自定义CSS3变换来切换页面
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Custom Transition</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <style> 09 .mine.in { 10 -webkit-animation-name: myslidein; 11 } 12 13 .mine.out { 14 -webkit-animation-name: myslideout; 15 } 16 17 @-webkit-keyframes myslidein { 18 from { -webkit-transform: rotateZ(0deg) scale(0);} 19 to { -webkit-transform: rotateZ(360deg) scale(1); } 20 } 21 @-webkit-keyframes myslideout { 22 from { -webkit-transform: rotateZ(360deg) scale(1); } 23 to { -webkit-transform: rotateZ(0deg) scale(0); } 24 } 25 </style> 26 <script type="text/javascript" 27 src="http://code.jquery.com/jquery-1.7.1.min.js"> 28 </script> 29 <script type="text/javascript" src= 30 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 31 </script> 32 </head> 33 <body> 34 35 <div data-role="page"> 36 37 <div data-role="header"> 38 <h1>First</h1> 39 </div> 40 41 <div data-role="content"> 42 43 <p>Hello world <a href="#second" data-transition="mine">and go 44 to the second</a></p> 45 46 </div> 47 48 </div> 49 50 <div data-role="page" id="second"> 51 52 <div data-role="header"> 53 <h1>Second</h1> 54 </div> 55 <div data-role="content"> 56 Hello again! 57 </div> 58 59 </div> 60 61 </body> 62 </html>在代码清单9-9中，仍然看不到一丁点儿自定义的JavaScript代码。可以看到，第43行有个data-transition属性，引用了一个自定义值，即mine。当需要过渡动画时，jQuery Mobile会使用这个值来添加class属性。
在第9～15行的CSS声明中，你发现有两个定义，即mine类和in类的组合使用以及mine类out类的组合使用。两者的CSS实现引用了第17～24行指定的CSS3动画。
在第17～24行，你发现CSS声明在变换过程中会使页面发生旋转。使用-webkit-前缀，这些动画就只能在iOS、Safari以及Chrome上工作。为使这些动画能在其他浏览器上工作，可以添加–moz-、-ms-，或者当未来某个时候标准发展完备时，可以省去前缀。这里准备的示例针对的是iPhone和iPad。
如果你正在使用jQuery Mobile并且使用的浏览器不支持3D变换，则会退回到简单的渐变变换（fade transition）。你也可以选择覆盖默认行为，将某些变换改为别的行为。可以更改全局配置来做到这一点，比如：
$.mobile.transitionFallbacks.slideout = "none";另一种可能希望覆盖页面变换的情况是：大屏幕上的效果可能是断断续续的。可以通过设置 maxTransitionWidth 值来改变这种情况，如下所示：
$.mobile.maxTransitionWidth = 640;当设备的屏幕宽度大于640时，这会把变换设置为none。
相关资源：jQuery.ui.1.7.2中文文档