how to make animations smoother

[Paul Rouget]

(sorry if this post is duplicate, for some reasons, the first message never
reached the mailing list)

In the homescreen, in the "Edit" mode (when you can drag'n drop icons), the
icons are animated (transition:scale(0.95) to transition:scale(1.05)).

The animation is not very smooth. Gecko is not very good at animating
transitions at a low speed (bug 663776).

There's a work-around though, that, in this case, is working very well:
including a rotate in the transforms make the animation much smoother.

Even a very small value.

I don't know if you use a lot of transitions/animations, but until bug 663776 is
fixed, I encourage you to consider this work-around.

--- a/apps/homescreen/style/dragdrop.css
+++ b/apps/homescreen/style/dragdrop.css
@@ -38,10 +38,10 @@
}

@-moz-keyframes shake {
- 0% { -moz-transform: scale(1); }
+ 0% { -moz-transform: scale(1) rotate(1deg); }
25% { -moz-transform: scale(1.05); }
- 50% { -moz-transform: scale(1); }
- 75% { -moz-transform: scale(0.95); }
+ 50% { -moz-transform: scale(1) rotate(1deg); }
+ 75% { -moz-transform: scale(0.95) rotate(1deg); }
100% { -moz-transform: scale(1); }
}

-- Paul

[Vivien]

What about making a pull request? :)

Regards,
Vivien.
> -- Paul
> _______________________________________________
> dev-gaia mailing list
> dev-...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-gaia