CSS3 scale and change size of an image or element on hover

As we saw in the last post I wrote – some where under css3 – I think,
The CSS3 scaling is pretty sweet. I would recommend using a transition so the image expands or shrinks gradually.
I prefer the gradual scale. The red apple seems to pop up really fast with a jerking movement.  You will notice that the
red-apple does not have the transition applied to the element.

img#apple
{
  -webkit-transition: transform 1s ease;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: transform 1s ease;  /* Firefox 4-15 */
       -o-transition: transform 1s ease;  /* Opera 10.50–12.00 */
          transition: transform 1s ease;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}
img#apple:hover,
img#red-apple:hover
{
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -o-transform: scale(1.4);
         transform: scale(1.4);
}