Chrome: CSS & JS transition not working properly

Question

I have three images img1, img2 and img3 ( 3 images ). It's initial position is -50% absolute top right and left respectively. When I change the position to static, with transition 2s it actualy needs to moved to center.

Problem While the transiton is taking place, the is snapping in some chrome ( in some laptop's chrome ). I know what is making the transition breaking.

This is my jQuery code.

        $(".middle-fixed-coming-soon-top").css({"top": "0px"});
        $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-coming-soon-top").css({"position": "static"});
            // code to execute after transition ends
        });

        $(".middle-fixed-organics-left").css({"left": "333px"});
        $(".middle-fixed-organics-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-organics-left").css({"position": "static"});
            $(".middle-fixed-organics-left .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

        $(".middle-fixed-tagline-right").css({"right": "333px"});
        $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-tagline-right").css({"position": "static"});
            $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

I am new to jQuery. Can anyone help? Thanks in advance.

EDITS
This happends when I reload second time or more.

Answer 1

The biggest thing I'm noticing is that you're switching an element from position: absolute to position: static. This means it switches from not influencing the surrounding content, to pushing everything else out of the way. I'd use relative instead of absolute, and take out the static switch entirely. From there, you should just need to re-kerjigger the left/top positioning. The code below should handle all of the JS end, just the CSS needs position: absolute to switch to position: relative.

        $(".middle-fixed-coming-soon-top").css({"top": "0px"});
        $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            // code to execute after transition ends
        });

        $(".middle-fixed-left").css({"left": "0px"});
        $(".middle-fixed-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-left .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

        $(".middle-fixed-tagline-right").css({"right": "0px"});
        $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });