# Easing Published articles for Easing. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## ease-in vs ease-out vs ease-in-out: CSS Easing Explained DevFeed: [ease-in vs ease-out vs ease-in-out: CSS Easing Explained]() Original publisher: [Read original article]() Author: Marko Published: 2026-11-08T09:00:00Z Content type: article Language: en Sources: [Marko Denic Blog]() Topics: [CSS](), [web animation]() Tags: [animation](), [animations](), [api](), [bounce](), [css](), [cubic-bezier](), [custom](), [demo](), [ease](), [easing](), [function](), [javascript](), [linear](), [motion](), [physics](), [tutorial](), [web-development]() ### AI overview CSS easing controls how animation speed changes over time. The text recommends `ease-out` for entering UI elements, `ease-in` for short exits, `ease-in-out` for visible elements moving between positions, and `linear` for constant motion such as spinners; linear movement that starts and stops can look mechanical. Custom `cubic-bezier()` curves can alter the feel or overshoot, while `steps(n)` creates frame-by-frame motion and `linear()` can approximate spring-like bounces. Suggested interface durations range from 100-200 ms for small changes to 250-400 ms for modals, with exits shorter than entrances; the text also advises honoring `prefers-reduced-motion` and animating transform and opacity for smoothness. ### Source excerpt The difference between ease, ease-in, ease-out, ease-in-out and linear in CSS, with a live demo, when to use each one, custom cubic-bezier() curves, steps() and the new linear() function. ## 7 Game-Changing Web UI Features You Can Start Using Today DevFeed: [7 Game-Changing Web UI Features You Can Start Using Today]() Original publisher: [Read original article]() Author: Amit Merchant Published: 2026-10-06T00:00:00Z Content type: tutorial Language: en Sources: [Amit Merchant]() Topics: [Front end](), [CSS](), [Web](), [web animation](), [Dark Mode](), [view transitions]() Tags: [css](), [css-grid](), [dark-mode](), [easing](), [ui](), [web]() ### AI overview The article presents seven CSS and web UI features for developers, including text-box alignment, scrollspy, contrast-color(), scroll-state queries, gap decorations, light-dark(), and linear() easing. It explains their intended uses and provides CSS examples. ### Source excerpt I was watching this video from the Google IO on all the new web UI features that are coming to the web platform and I was blown away by how many of these features are already available in modern browsers. ## Generate editorial React presentations with one Claude Code prompt DevFeed: [Generate editorial React presentations with one Claude Code prompt]() Original publisher: [Read original article]() Author: Ishan Khanna Published: 2026-05-17T08:17:35Z Content type: tutorial Language: en Sources: [Ishan Khanna]() Topics: [Claude Code](), [React](), [Prompt Engineering](), [generative-ai-tools]() Tags: [animation](), [architecture](), [claude](), [claude-code](), [design-system](), [diagram](), [easing](), [editorial](), [fonts](), [generate](), [jsx](), [keyboard](), [llm](), [llms](), [pie](), [presentations](), [prompt](), [prompting](), [react](), [slides](), [tailwind](), [vite]() ### AI overview The prompt generates a five-slide React presentation from an editable content block, fixing the design system and narrative arc while leaving topic details open. Its recurring sequence is title, conflict, intervention, proof, and wisdom, with consistent fonts, accent-color rules, animation timing, keyboard navigation, animated counters, a diagram, and charts. The suggested workflow is to edit headlines, statistics, diagram nodes, chart values, and lessons, run the prompt in Claude Code, then add the resulting single-file component to a Vite, React, and Tailwind project with the mentioned dependencies. The author says this approach suits topics with a genuine before-and-after; subjects without a conflict/intervention/proof shape may feel forced. ### Source excerpt If you caught my YouTube Short on generating presentations as React apps with an LLM, this is the prompt I promised. Paste it into Claude Code, edit the CONTENT block at the top, and you get back a single-file Presentation.jsx -- five slides, keyboard nav, animated counters, an ## Springs and Bounces in Native CSS DevFeed: [Springs and Bounces in Native CSS]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2025-10-28T12:00:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [CSS](), [animations](), [Web Development]() Tags: [animation](), [css](), [easing](), [motion](), [timing]() ### AI overview A tutorial on using CSS's linear() timing function to create physics-based springs, bounces, and other easing effects natively, without relying on JavaScript animation libraries. It explains how the function approximates easing curves with user-defined points and notes relevant limitations. ### Source excerpt The "linear()" timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I've been experimenting with this API for a while now, and in this post, I'll share all of the tips and tricks I've learned for using it effectively. ✨ ## A Friendly Introduction to Spring Physics DevFeed: [A Friendly Introduction to Spring Physics]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2020-09-21T14:15:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [animations](), [Tutorial](), [CSS](), [web animation](), [Web Development]() Tags: [animation](), [css-transitions](), [easing](), [fluid](), [how-to](), [physics](), [spring](), [techniques](), [tutorial]() ### AI overview This tutorial explains how spring physics can create fluid, organic web animations. It introduces the mental models behind springs and contrasts them with conventional CSS transitions and easing. ### Source excerpt Of all the little tips and techniques I've picked up over the years about animation, spring physics remains one of the most powerful and flexible. In this tutorial, we'll learn how to harness their power to build fluid, organic transitions. ## CSS Animations with only one keyframe DevFeed: [CSS Animations with only one keyframe]() Original publisher: [Read original article]() Author: Lea Verou Published: 2012-12-12T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [web animation](), [Web Development]() Tags: [animation](), [animations](), [blog](), [css](), [css-animation](), [css-animations](), [easing](), [tips]() ### AI overview CSS animations can omit `from` and `to` keyframes when their intended values match the element's computed styles: the browser constructs missing 0% and 100% keyframes from those values. In the heart example, this reduces the animation to a single `50%` keyframe that scales the heart. For a more natural pulse, the excerpt instead sets only `to { transform: scale(1.4); }` and uses `alternate`, which reverses each even iteration and also reverses the timing (easing) function on reversed iterations. ### Source excerpt This is a very quick tip, about a pet peeve of mine in almost every CSS animation I see. As you may know, I'm a sucker for reducing the amount of code (as long as it remains human readable of course). I demonstrated a very similar example in my "CSS in the 4th dimension" talk, but I recently realized I never blogged about it (or seen anyone else do so). Lets assume you have a simple animation of a pounding heart, like so: @keyframes pound { from { transform: none; } 50% { transform: scale(1.4); } to { transform: none; } } .heart { /* ... */ animation: pound .5s infinite; } You can see the problem already: the shrunk heart state is repeated twice in the keyframes (from and to). You probably know you can combine them into one rule, like so: @keyframes pound { from, to { transform: none; } 50% { transform: scale(1.4); } } What many don't know, is that you don't need these two keyframes at all, since they basically replicate the same state as the one in the .heart rule. To quote the CSS Animations spec: If a 0% or "from" keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or "to" keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated. Therefore, the code could actually be as simple as: @keyframes pound { 50% { transform: scale(1.4); } } This trick is very useful for providing fallbacks that are the same as the first or last keyframe, without having to repeat them in the @keyframes rule. Of course it doesn't only apply to animations where you only have one keyframe beyond from and/or to. You can omit the from and to keyframes in every animation, when you want them to be the same as the styles that are applied to the element anyway. Of course, to make this particular animation appear more natural, it would be much more wise to do something like this, still with only one keyframe (the from state is dynamical ## Simpler CSS typing animation, with the ch unit DevFeed: [Simpler CSS typing animation, with the ch unit]() Original publisher: [Read original article]() Author: Lea Verou Published: 2012-02-05T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [web animation](), [Web Development](), [Programming]() Tags: [animation](), [blog](), [browser-support](), [coding](), [css](), [css-animations](), [css-values](), [easing](), [fallback](), [firefox](), [script](), [tips]() ### AI overview The revised typing animation uses the `ch` unit to size steps by character width, removing the need for an obscuring span and allowing non-solid backgrounds. The character count remains hard-coded, but can be set by script without changing the animation stylesheets. Each animation uses one keyframe and relies on the browser to derive missing start and end keyframes from fallback styles. The excerpt reports full support in Firefox 1+ and IE10, while WebKit-based browsers animate with an imperfect `em` fallback; browsers without CSS animations, such as Opera, show a solid, non-blinking caret. Firefox's `ch` support is noted as buggy with some fonts, including Monaco. ### Source excerpt A while ago, I posted about how to use steps() as an easing function to create a typing animation that degrades gracefully. Today I decided to simplify it a bit and make it more flexible, at the cost of browser support. The new version fully works in Firefox 1+ and IE10, since Opera and WebKit don't support the ch unit and even though IE9 supports it, it doesn't support CSS animations. To put it simply, one ch unit is equivalent to the width of the zero (0) character of the font. So, in monospace fonts, it's equivalent to the width of every character, since every character has the same width. In the new version, we don't need an obscuring span, so no extra HTML and it will work with non-solid backgrounds too. Also, even though the number of characters still needs to be hard-coded, it doesn't need to be hardcoded in the animation any more, so it could be easily done through script without messing with creating/modifying stylesheets. Note how each animation only has one keyframe, and takes advantage of the fact that when the from (0%) and to (100%) keyframes are missing, the browser generates them from the fallback styles. I use this a lot when coding animations, as I hate duplication. In browsers that support CSS animations, but not the ch unit (such as WebKit based browsers), the animation will still occur, since we included a fallback in ems, but it won't be 100% perfect. I think that's a pretty good fallback, but if it bothers you, just declare a fallback of auto (or don't declare one at all, and it will naturally fall back to auto). In browsers that don't support CSS animations at all (such as Opera), the caret will be a solid black line that doesn't blink. I thought that's better than not showing it at all, but if you disagree, it's very easy to hide it in those browsers completely: Just swap the border-color between the keyframe and the h1 rule (hint: when a border-color is not declared, it's currentColor). Edit: It appears that Firefox's support for the ch uni ## A better tool for cubic-bezier() easing DevFeed: [A better tool for cubic-bezier() easing]() Original publisher: [Read original article]() Author: Lea Verou Published: 2011-09-14T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [HTML](), [Tool](), [curve geometry]() Tags: [accessible](), [accessors](), [adapting](), [api](), [arrow](), [blog](), [border-radius](), [browser](), [css](), [css-transitions](), [css3](), [cubic](), [cubic-bezier](), [easing](), [features](), [html5](), [keyboard](), [opera](), [original](), [range](), [releases](), [spec](), [tool](), [values](), [webkit]() ### AI overview The cubic-bezier.com tool visualizes CSS easing curves in a 2D plane and supports y values outside 0-1, which the author says the latest specification allows; it warns about WebKit. Users can adjust handles by dragging, clicking, or using keyboard arrows, inspect progression and time percentages across the curve, save and share curves, and compare curves at a chosen duration. The author reports testing modern Chrome, Firefox, Opera, and Safari, but had not tested IE10. The excerpt ends during the feature list, so it may omit further details. ### 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