✳flâneur — a map of the web's best reading

Transitions

animations.dev · 1,872 words · saved by 2 readers

Elements on a site often have state. Buttons might change color when hovered, a toast might change its transform values when it enters the screen. By default, changes in CSS happen instantly.   CSS transitions allow you to interpolate between the initial and target states. It’s the process of estimating unknown values that fall between known values. In the context of CSS transitions, it’s the process of calculating the values between the initial and target state. To add a transition we need to use the transition property. It’s a shorthand property for four transition properties: Here’s an example of how it looks: Let’s briefly clarify what they mean: To transition a change in the transform property we can simply add something like this: This means that our transform will be interpolated from one state to another over 0.2s seconds with the ease easing. Hover over the box below to see it in practice going from scale(1) to scale(1.5) on hover. Notice how when you hover and unhover before

Transitions Fundamentals Walkthroughs Module 0 1 Animation Theory Intro What makes an animation feel right The Easing Blueprint Spring animations Timing and purpose Taste Train your judgement New Animations and AI Practical Animation Tips Module 0 2 CSS animations The beauty of CSS animations Transforms Transitions Keyframe Animations The Magic of Clip Path Module 0 3 Framer Motion Why Framer Motion The Basics How do I code animations Feedback popover Multi-step component Trash interaction Hooks and animations Interactive graph Animating in public Module 0 4 Good vs Great animations The big li

Explore this link on the map →

saved by

related reading