Jquery mobile custom transitions

HTML

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<div data-role="page" id="index">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <a data-role="button" href="#cat1" data-transition="myRotate">Cat 1</a>                
        <a data-role="button" href="#cat1" data-transition="myRotate">Cat 2</a>                
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="cat1" data-transition="myRotate">

    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Cat 1</p>
        <a href="http://fiddle.jshell.net/nachiket/cHmhW/show/light/"> Item 1 detail </a>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="cat2">

    <div data-role="header">
        <a data-rel="back" data-direction="reverse">Back</a>
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Cat 2</p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

CSS

.myRotate.in {
            filter: blur(0px);
            -webkit-animation-name: myRotateinfromright;
            -moz-animation-name: myRotateinfromright;
        }
            
        .myRotate.out {
            filter: blur(5px);
            -webkit-transform: translateX(-100%);
            -moz-transform: translateX(-100%);
            -webkit-animation-name: myRotateouttoleft;
            -moz-animation-name: myRotateouttoleft;
        }

        @-webkit-keyframes myRotateinfromright {
            from { -webkit-transform: translateX(100%); }
            to { -webkit-transform: translateX(0); }
        }
        
        @-webkit-keyframes myRotateouttoleft {
            from { -webkit-transform: translateX(0); }
            to { -webkit-transform: translateX(-100%); }
        }
    
        @-moz-keyframes myRotateinfromright {
            from { -moz-transform: translateX(100%); }
            to { -moz-transform: translateX(0); }
        }
        
        @-moz-keyframes myRotateouttoleft {
            from { -moz-transform: translateX(0); }
            to { -moz-transform: translateX(-100%); }
        }