# Cubic Bezier

Published articles for Cubic Bezier.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## A better tool for cubic-bezier() easing

DevFeed: [A better tool for cubic-bezier() easing](<https://devfeed.tech/articles/a-better-tool-for-cubic-bezier-easing-52019.md>)

Original publisher: [Read original article](<https://lea.verou.me/2011/09/a-better-tool-for-cubic-bezier-easing/>)

Author: Lea Verou

Published: 2011-09-14T00:00:00Z

Content type: article

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [HTML5](<https://devfeed.tech/topics/html5.md>), [LocalStorage](<https://devfeed.tech/topics/localstorage.md>), [export](<https://devfeed.tech/topics/export.md>), [import](<https://devfeed.tech/topics/import.md>)

Tags: [accessible](<https://devfeed.tech/tags/accessible.md>), [bezier-curves](<https://devfeed.tech/tags/bezier-curves.md>), [blog](<https://devfeed.tech/tags/blog.md>), [css](<https://devfeed.tech/tags/css.md>), [css-transitions](<https://devfeed.tech/tags/css-transitions.md>), [css3](<https://devfeed.tech/tags/css3.md>), [cubic-bezier](<https://devfeed.tech/tags/cubic-bezier.md>), [easing](<https://devfeed.tech/tags/easing.md>), [html5](<https://devfeed.tech/tags/html5.md>), [import](<https://devfeed.tech/tags/import.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [library](<https://devfeed.tech/tags/library.md>), [original](<https://devfeed.tech/tags/original.md>), [releases](<https://devfeed.tech/tags/releases.md>), [webkit](<https://devfeed.tech/tags/webkit.md>)

### AI overview

The author describes building a cubic-bezier easing tool after finding existing tools inadequate for demonstrating CSS3 transitions. The tool supports out-of-range values, keyboard accessibility, curve saving with localStorage, importing and exporting, permalinks, and curve comparison.

### Source excerpt

A few days ago, I had a talk at a conference in Zurich (I'm going to write more about it in another post). The talk was about "10 things you might not know about CSS3". The first of those things was how you can do bouncing transitions with cubic-bezier() instead of an easing keyword. As usual, my slides included a few live demos of the functionality, in which I edited the cubic-bezier() parameters and the audience could see the transition produced. However, in the case of cubic-bezier() that's not enough. No matter how much you see someone changing the parameters, if you don't picture it in a 2D plane, it's very hard to understand how it works. So, the night before, I searched for a tool I could use to show them how bezier curves are formed. I found plenty, but all of them restricted the the coordinates to the 0-1 range. I'm not sure if the cause is ignorance about the spec changes or that Webkit hasn't caught up with those changes yet (but it will, soon). The only one that supported values out of range was this one from the Opera Dragonfly developers, but I found it kinda impossible to adapt. For my talk, I tried to adapt one of them but it was late so I gave up after a while and ended up just showing them a screenshot. And the day after the talk, I started adapting this to my needs (ever tried coding at a conference? It's awesome, you get to ask questions from very knowledgeable people and ger replies straight away). And then I started cleaning up the code, changing how it worked, adding features. At this point, I think the only thing that's left from that tool is ...the HTML5 doctype. After 3-4 days, I finished it, and got it its own domain, cubic-bezier.com (I was surprised it was still free). So, in a nutshell, what makes this better? Lots of things: It supports y values out of range, as per the latest version of the spec (and shows a warning for Webkit) It's fully accessible from the keyboard You can move the handles not only by dragging but also by clicking on