CSS Transtion: To move the web from "hard" to "sliding"

In the design of the UI, transition Properties are the watershed of user experience (UX). The interaction without transition occurs instantaneously, which gives users a visual sense of stratification; A reasonable transition, on the other hand, can simulate the coherence of the physical world, guide the user's vision and create a causal sense of operation. This paper will explore transition How to address the empirical dilemma of practical interaction.

1. Addressing visual fatigue in instantaneous state transitions

An instant change in colour puts pressure on the eye when the user mouse is hovering (Hover) on the button or clicking to switch to a switch. Pass. transition And you can make this change happen in 200ms to 300ms smooth.

Best practices: Recommended to set the length to 0.2s Present. 0.4s Between. This area is both felt to be fluid and does not cause users to feel delayed. By this generator ease-in-out The effect, which makes interaction more natural and elegant.

2. Magic of the Bézier Curve (Cubic-bezier)

Preset ease or linear Sometimes it is not possible to meet the requirements of advanced design. If you want a "flexible" or "shrunk-up" effect, you need to use the Bézier curve.

Progress skills: Use cubic-bezier(0.68, -0.55, 0.265, 1.55) A Backshot (Back) effect can be created, often for the pop-up of a model frame or pull-out of a sidebar. This dynamic effect of “physical inertia” greatly enhances the sense of the interface.

3. Optimizing the rhythm of multi-eat transition

Sometimes we need to change location, transparency and size simultaneously. If all properties use the same length and delay, the effect of action would appear rigid.

Solutions: Utilization transition-delay 。 A series animation with a “mobility sense” can be created by setting a small delay difference for different properties (e.g. shift first, transparency later). This detail is essential to distinguish between ordinary websites and top-of-the-art design.

Performance and attention

Trigger mechanism: transition Need a change of state to trigger (e.g. :hover 、 :active or switch class names through the JS.
Transitional Properties: Not all attributes smooth the transition. Colours, sizes, transparency and transformation are the best performance. Try to avoid it. display: none Present. block Transition (which is usually ineffective and recommended for conversion) opacity and visibility ）。
Hardware acceleration: When transition involves transform or opacity , the browser usually opens the GPU hardware to accelerate, ensuring that the power does not create a CPU burden.