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.
@keyframes animation not working only in Chrome.
Page 1 of 18 Replies - 357 Views - Last Post: 02 August 2019 - 10:21 AM
Replies To: @keyframes animation not working only in Chrome.
#2
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?
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?
#3
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.
#4
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; } }
#5
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.
I converted the all the em to px for the entire css page, unfortunately it made no difference.
Thanks for the suggestion.
#6
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.
#7
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
http://programmingte...e_02/index.html
#8
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.
#9
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
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
Page 1 of 1