Animation KeySplines

Explore, understand, and test CSS and SVG animation keySplines.

  • Drag the handles above, or enter four space-separated numeric values between 0 and 1:

  • The Indicator shows the point in time the animation is currently at; the steeper the curve at this point, the faster the value of the animated attribute changes.

Unfortunately, your browser doesn't support svg. This site uses SVG extensively to make a point.

Please consider coming back using a modern browser.

OK

Unfortunately, your browser doesn't support native SVG animations (SMIL). This site uses SVG animations extensively to make a point.

Please consider coming back using a modern browser (not IE 11 or below as these don't support SMIL animations).

OK