Jquery mobile custom transitions

by HYEONGJINKIM

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="moveFrom">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 {
             -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -webkit-animation-name: myRotateinfromright;
            -moz-animation-name: myRotateinfromright;
        }

            
        .myRotate.out {
            -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%); }
        }


.moveFrom.in {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-animation: moveFromRight;
	-moz-animation: moveFromRight;
	animation: moveFromRight;
	/*-webkit-animation: moveFromRight .6s ease both;
	-moz-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;*/
}

.moveFrom.out {
    -webkit-transform: translateX(-100%);    
    -moz-transform: translateX(-100%);
    -webkit-animation: moveFromLeft;
	-moz-animation: moveFromLeft;
	animation: moveFromLeft;
	/*-webkit-animation: moveFromLeft .6s ease both;
	-moz-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;*/
}
@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0%); }
}
@-moz-keyframes moveFromRight {
	from {...