From acbec71e29b6acec6cd2087e84e8434fecc0053f Mon Sep 17 00:00:00 2001 From: "jblas@adobe.com" Date: Thu, 28 Oct 2010 23:40:11 -0700 Subject: [PATCH] Fixed #117 "Global: blinky page transitions" According to the CSS Animations spec as soon as an animation completes, any properties that were animated revert back to their previous values. This means that the CSS rule that refers to the animation by name must also have the "To" property values specified. --- themes/default/jquery.mobile.transitions.css | 24 +++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/themes/default/jquery.mobile.transitions.css b/themes/default/jquery.mobile.transitions.css index 46423829..0c36a139 100644 --- a/themes/default/jquery.mobile.transitions.css +++ b/themes/default/jquery.mobile.transitions.css @@ -4,9 +4,10 @@ * 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-transform: rotate(360deg); + -webkit-animation-name: spin; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} @@ -22,22 +23,27 @@ Built by David Kaneda and maintained by Jonathan Stark. } .slide.in { + -webkit-transform: translateX(0); -webkit-animation-name: slideinfromright; } .slide.out { + -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; } .slide.in.reverse { + -webkit-transform: translateX(0); -webkit-animation-name: slideinfromleft; } .slide.out.reverse { + -webkit-transform: translateX(100%); -webkit-animation-name: slideouttoright; } .slideup.in { + -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; z-index: 10; } @@ -48,6 +54,7 @@ Built by David Kaneda and maintained by Jonathan Stark. } .slideup.out.reverse { + -webkit-transform: translateY(100%); z-index: 10; -webkit-animation-name: slideouttobottom; } @@ -57,6 +64,7 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-name: dontmove; } .slidedown.in { + -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; z-index: 10; } @@ -67,6 +75,7 @@ Built by David Kaneda and maintained by Jonathan Stark. } .slidedown.out.reverse { + -webkit-transform: translateY(-100%); z-index: 10; -webkit-animation-name: slideouttotop; } @@ -127,6 +136,7 @@ Built by David Kaneda and maintained by Jonathan Stark. } .fade.in { + opacity: 1; z-index: 10; -webkit-animation-name: fadein; } @@ -139,20 +149,24 @@ Built by David Kaneda and maintained by Jonathan Stark. } .flip.in { + -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromleft; } .flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); -webkit-animation-name: flipouttoleft; } /* Shake it all about */ .flip.in.reverse { + -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromright; } .flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); -webkit-animation-name: flipouttoright; } @@ -189,11 +203,15 @@ Built by David Kaneda and maintained by Jonathan Stark. } .pop.in { + -webkit-transform: scale(1); + opacity: 1; -webkit-animation-name: popin; z-index: 10; } .pop.out.reverse { + -webkit-transform: scale(.2); + opacity: 0; -webkit-animation-name: popout; z-index: 10; }