Keyframes animations across browsers
-
I’m trying to animate blocks of text on load for a few pages on my site. This is working just as I want it to in the Edge browser, but not for Firefox or Chrome. I’m probably missing something simple/stupid, but I’ve fiddled with this for a long time and I thought I had all the prefixes where I needed them for other browswers, but still no luck. Here’s the custom CSS I’ve entered for these animations:
@-webkit-keyframes slideInFromTop {
0% {
transform: translateY(-100px);
}100% {
transform: translateY(0px);
}
}@-moz-keyframes slideInFromTop {
0% {
transform: translateY(-100px);
}100% {
transform: translateY(0px);
}
}@-ms-keyframes slideInFromTop {
0% {
transform: translateY(-100px);
}100% {
transform: translateY(0px);
}
}@keyframes slideInFromTop {
0% {
transform: translateY(-100px);
}100% {
transform: translateY(0px);
}
}.page-id-6 .entry-content, .page-id-2 .entry-content {
-moz-animation: slideInFromTop 1.7s 0 1;
-webkit-animation: slideInFromTop 1.7s 0 1;
-ms-animation: slideInFromTop 1.7s 0 1;
animation: slideInFromTop 1.7s 0 1;
}The blog I need help with is: (visible only to logged in users)
-
Hi, I’m seeing the animations in Safari, Firefox and Chrome now although things are much smoother in Safari than in Chrome or Firefox. The mission statement slide in transform seems to be much smoother in Safari. Clunky in FF and Chrome.
I’m not seeing anything wrong with your code. I’ve asked one of our theme developers to take a look and see if they see what might be causing this.
-
Chris, one of our developers found the issue. In this part,
.page-id-6 .entry-content, .page-id-2 .entry-content { -moz-animation: slideInFromTop 1.7s 0 1; -webkit-animation: slideInFromTop 1.7s 0 1; -ms-animation: slideInFromTop 1.7s 0 1; animation: slideInFromTop 1.7s 0 1; }the 0 (zeros) have to have a “s” after them since they are a delay in seconds. With the “s” after the 0, things work.
-
That’s very odd…..I never saw it in Firefox or Chrome, and even after adding the “s” after the zeros, I’m still unable to get the animations to work in anything other than Edge……maybe it’s somehow specific to my PC? I’ve checked the browsers and they are up to date…..
-
-
Okay, so the plot thickens…..indeed the issue IS that the “s” is required after the zeros. I’ve verified this by loading page in Firefox, inspecting the element and adding the “s”….voila, it works! Same scenario in Chrome.
Here’s the REALLY weird part: despite repeated attempts to add the “s” in the CSS customization window, then saving and publishing the changes, as soon as I exit customization and come back, the all the added “s” are gone. It’s like WordPress thinks it’s an incorrect syntax and is automatically removing them? I have no idea. I’ve tried at least five times to make the change, and it won’t stick. I’ve made other (arbitrary) changes and have been able to successfully save and publish those, so it seems to be specific to this code for some reason.
-
Oh, our syntax checker needs an adjustment it would seem. Let’s fool it. Set the delay to .0001s instead of 0 and all should be good.
I’ll get one of our developers to look into fixing the syntax checking software for keyframe related stuff.
-
-
- The topic ‘Keyframes animations across browsers’ is closed to new replies.
WordPress.com Forums 