question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question - Support for CSS Keyframe Animations?

See original GitHub issue

First, thanks for the ponyfill! We appreciate the effort put into this and has given us some hope of using modern CSS features in older browsers.

We are attempting to use this for a CSS keyframe animation, but it does not seem like the generated keyframe is being applied properly. It does look like css-vars-ponyfill is inserting the new values for variables as expected, but it seems as if it does not replace the keyframe with the updated values.

Our question is if there is something special we need to do for animations, or should this work as we would like?

Here is an example. This is the CSS we start with:

:root {
  --red: 123;
  --blue: 9;
  --green: 255;
}

@keyframes test {
  0% {
    box-shadow:0 -2.6em 0 0 rgba(var(--red), var(--green), var(--blue), 1);
  }

  100% {
    box-shadow:0 -2.6em 0 0 rgba(var(--green), var(--red), var(--blue), 1);
  }

When we run css-vars-ponyfill, we get the following style tag inserted:

<style id="css-vars-ponyfill">
/*__CSSVARSPONYFILL-1__*//*__CSSVARSPONYFILL-3__*//*__CSSVARSPONYFILL-5__*//*__CSSVARSPONYFILL-7__*//*__CSSVARSPONYFILL-9__*//*__CSSVARSPONYFILL-11__*//*__CSSVARSPONYFILL-13__*/@keyframes test{0%{box-shadow:0 -2.6em 0 0 rgba(27, 117, 187, 1);}100%{box-shadow:0 -2.6em 0 0 rgba(117, 27, 187, 1);}}
/*__CSSVARSPONYFILL-17__*//*__CSSVARSPONYFILL-19__*//*__CSSVARSPONYFILL-21__*//*__CSSVARSPONYFILL-23__*//*__CSSVARSPONYFILL-25__*//*__CSSVARSPONYFILL-27__*/
</style>

And when we perform an update on our code (--red is 123 and --green is 0 say) we get the following output:

<style id="css-vars-ponyfill">
/*__CSSVARSPONYFILL-1__*//*__CSSVARSPONYFILL-3__*//*__CSSVARSPONYFILL-5__*//*__CSSVARSPONYFILL-7__*//*__CSSVARSPONYFILL-9__*//*__CSSVARSPONYFILL-11__*//*__CSSVARSPONYFILL-13__*/@keyframes test{0%{box-shadow:0 -2.6em 0 0 rgba(123, 0, 0, 1);}100%{box-shadow:0 -2.6em 0 0 rgba(0, 123, 0, 1);}}
/*__CSSVARSPONYFILL-17__*//*__CSSVARSPONYFILL-19__*//*__CSSVARSPONYFILL-21__*//*__CSSVARSPONYFILL-23__*//*__CSSVARSPONYFILL-25__*//*__CSSVARSPONYFILL-27__*/
</style>

That seems correct to us, but it does not apply to the existing component as expected.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
pseudoramblecommented, Jul 17, 2018

I have been taking a look at the /*__CSSVARSPONYFILL-XX__*/ issue this morning. I do still see it happening on our end. I’ll open up a new issue so it doesn’t get lost at the bottom of this one.

0reactions
jhildenbiddlecommented, Jul 17, 2018

Excellent! Good to hear it is working well for you.

Thanks again for taking the time to open the issue. This could have been a tricky issue for others to work through on their own, so it’s nice to have a fix baked into the ponyfill.

Two quick closing items:

  1. I’m still curious as to why you are/were seeing the internal /*__CSSVARSPONYFILL-XX__*/ placeholders in your CSS output. Can you confirm that this is still the case? If so, this is definitely an issue that needs to be addressed.

  2. Since you are using React, you may be interested in the new options.watch that was also added in 1.8.0.

Thanks again, @pseudoramble!

Read more comments on GitHub >

github_iconTop Results From Across the Web

keyframes - CSS: Cascading Style Sheets - MDN Web Docs
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along ...
Read more >
Keyframe Animation Syntax
While CSS transition is only from one state to another, a keyframe animation can interpolate between many different states during its timeline. ...
Read more >
20 CSS Animation Interview Questions and Answers
CSS Animation Interview Questions and Answers · 1. What are keyframes in CSS? · 2. How do you set the direction of an...
Read more >
CSS keyframe animations working on one selector but not ...
The hiAnimation works just fine -- animating in exactly as intended -- but neither nameAnimation or titleAnimation work, even though they're ...
Read more >
The Ultimate Guide to Animations in CSS
The rule must contain at least one keyframe to describe how the animated element should render at a given time during the animation...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found