8 Replies - 357 Views - Last Post: 02 August 2019 - 10:21 AM

#1 holthaunt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-February 17

@keyframes animation not working only in Chrome.

Posted 01 August 2019 - 10:36 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: @keyframes animation not working only in Chrome.

#2 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15359
  • View blog
  • Posts: 61,583
  • Joined: 12-June 08

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 08:16 AM

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?
Was This Post Helpful? 0
  • +
  • -

#3 holthaunt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-February 17

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 08:22 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15359
  • View blog
  • Posts: 61,583
  • Joined: 12-June 08

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 08:47 AM

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;
    }
}


Was This Post Helpful? 1
  • +
  • -

#5 holthaunt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-February 17

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 09:11 AM

modi123-1.

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

Thanks for the suggestion.
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15359
  • View blog
  • Posts: 61,583
  • Joined: 12-June 08

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 09:13 AM

Weird. That worked for me on FF, Chrome, Edge, Opera.
Was This Post Helpful? 0
  • +
  • -

#7 holthaunt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-February 17

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 09:24 AM

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
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15359
  • View blog
  • Posts: 61,583
  • Joined: 12-June 08

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 09:31 AM

Add in the other changes I had too. The bits commented out, and the change from 'margin' to just 'top/bottom' etc.
Was This Post Helpful? 0
  • +
  • -

#9 holthaunt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-February 17

Re: @keyframes animation not working only in Chrome.

Posted 02 August 2019 - 10:21 AM

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
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1