[holthaunt]

I have this one small part of a larger animation that is not working correctly only in Chrome.

http://programmingte...e_01/index.html

If you check out the above link in Firefox or MS Edge you'll see the correct movement of the image. I have a little experience with @keyframes animation, but this is a first. I did some research to see if it was something with @-webkit and tested the individual margin movements, but they seemed to work fine in other test animations I did. I have poured over the code and checked in autoprefixer, it seems to be in order, but it may be something simple I am overlooking. Any help is much appreciated.

[modi123_1]

I am seeing an image move across in chome. From right to left. Abet a little jerky.

I see a differnet animation in FF where it comes down from the top right to center and then back up half way.

Is that the issue?

[holthaunt]

Yes, that is correct. The FF image movement is how the image should move, but as you saw in Chrome it starts in a different position and does not transition up. Thanks for the reply.

[modi123_1]

Try using px and not em.

#robot {
    max-height: 100%;
    max-width: 100%;
    margin-left: 20.25em;
    margin-bottom: 32.5em;
    opacity: 0;
    /*-webkit-animation: robot 7000ms ease-in-out forwards;*/
    /*-webkit-animation: robot 7000ms ease-out;*/
     animation: robot 7000ms ease-in-out forwards;
}

/*@-webkit-keyframes robot {
    50% {
        opacity: .75;
        margin-left: 6.25em;
        margin-bottom: 7.5em;
    }

    100% {
        opacity: 1;
        margin-left: 6.25em;
        margin-bottom: 62.5em;
    }
}*/

@keyframes robot {
    
    0% {
        opacity: .55;
        /*margin-left: 6.25em;
        margin-bottom: 7.5em;*/
        left: 500px;
        top: 10px;
    }

    100% {
        opacity: 1;
        /*margin-left: 6.25em;
        margin-bottom: 62.5em;*/
        left: 10px;
        top: 300px;
    }
}

[holthaunt]

modi123-1.

I converted the all the em to px for the entire css page, unfortunately it made no difference.

Thanks for the suggestion.

[modi123_1]

Weird. That worked for me on FF, Chrome, Edge, Opera.

[holthaunt]

hmm! I made a copy of the css file, changed all the ems to pxs, linked to new css file, cleared cache in the browsers, and even added a different color background just make sure new css file was being linked, no luck. I even tried just changing just the lines you suggested should be changed. You can see the changed code here:

http://programmingte...e_02/index.html

[modi123_1]

Add in the other changes I had too. The bits commented out, and the change from 'margin' to just 'top/bottom' etc.

[holthaunt]

I total missed the top/bottom changes, sorry about that. I made the changes. I get some new movement, but I'll need to play around with the settings a bit to get it where it needs to be. I didn't think about doing the movement with position changes instead of margin changes, because everything was working well up until this point. I am still curious as to why the original code worked in FF/Edge, but not Chrome. You can see the current changes here:

http://programmingte...e_02/index.html

If any one is interested I have posted the full animation that I am currently working on to give some perspective as to what I am going for, it's a bit rough:

http://programmingte...e_03/index.html