What is Linear Easing? (A Simple Explanation)

Imagine an animation of a car moving across your screen. A simple, boring animation would have the car move at the exact same speed the whole time. This is called "linear" motion, and it feels robotic and unnatural. **Easing** is the secret sauce that makes animations feel alive. It's all about changing the speed of the animation over time. For example, a real car starts slowly, gets up to speed, and then slows down to a stop. Classic CSS functions like `ease-in-out` mimic this simple acceleration and deceleration.

But what if you want to create something more complex and fun? What if you want the car to lurch forward, slam on the brakes, and then zoom off? That's where the amazing new CSS `linear()` function comes in. It's a powerful tool that lets you define a completely custom speed curve for your animation by connecting a series of straight lines. This gives you the power to create incredibly detailed and realistic movements—like a bouncing ball, a stretching rubber band, or a springy, elastic effect—that used to require complicated JavaScript. This interactive generator is your visual playground for `linear()`. It lets you literally draw the speed curve you want, see a live preview, and get the code instantly. It's about taking a complex new CSS feature and making it simple, visual, and fun to use.

How to Use the Generator

Creating your own custom animation curve is an intuitive, hands-on process:

1. Start with a Preset (Optional): The easiest way to begin is to choose a pre-made curve from the "Load a Preset" dropdown. You can pick a classic like "Ease In Out" or a fun one like "Bounce" to see how it's made.
2. Click to Add Points: Simply click anywhere on the graph to add a new point to the curve. The tool will automatically connect the dots.
3. Drag to Adjust: You can click and drag any point you've added to fine-tune the shape of your curve. This is where you can get really creative!
4. Preview and Play: As you adjust the graph, the CSS code in the black box updates in real-time. Click the "Play" button at any time to see a preview of your custom animation in action.
5. Copy and Use: When you've created the perfect animation, just click the "Copy" button. You can then paste the generated CSS directly into your project's stylesheet.

Tips for Great Animations

• Create a "Bounce" Effect: The secret to a bounce is to make the curve go *past* its final destination. In the graph, this means dragging a point slightly above the top line (to a value like 1.1) before having it settle back down to 1.0 at the very end.
• Build "Anticipation": In real life, before you jump, you bend your knees. You can mimic this in animation by making the curve dip down slightly at the beginning before it shoots up. Try the "Anticipate" preset to see this in action!
• Subtlety is Powerful: You don't always need wild, bouncy curves. Sometimes, a very subtle and gentle curve, created with just one or two extra points, is all you need to make a user interface element feel more polished and delightful.
• Less is More: While you can add a lot of points, the most elegant and performant easing functions often use just a few well-placed points to define the motion. Start simple and only add complexity when you need it.