What it is: easing controls the speed curve of an animation, for example slow at the start and fast at the end. The classic keywords like ease only give smooth curves. The linear() function lets you list points on a custom curve, so you can build bounce and spring effects using only CSS.

How it works

Each value is the animation progress at that point in time. A value above 1 goes past the target and a value below 1 comes back. You can add a percentage to place a point at a specific moment.

Spring effect

css">.lotgrafix-card {
    transform: scale( 1 );
    transition: transform 0.6s ease;
    transition: transform 0.6s linear( 0, 0.6 20%, 1.15 40%, 0.95 60%, 1.02 80%, 1 );
}

.lotgrafix-card:hover {
    transform: scale( 1.1 );
}

The card overshoots a little, comes back, and settles. The first transition line is the fallback for browsers without support.

Bounce effect

.lotgrafix-ball {
    animation: lotgrafix-drop 1s linear( 0, 1 40%, 0.7 55%, 1 70%, 0.9 82%, 1 ) forwards;
}

@keyframes lotgrafix-drop {
    from { transform: translateY( -200px ); }
    to   { transform: translateY( 0 ); }
}

Save it as a variable

:root {
    --lotgrafix-spring: linear( 0, 0.6 20%, 1.15 40%, 0.95 60%, 1.02 80%, 1 );
}

.lotgrafix-menu {
    transition: transform 0.5s var( --lotgrafix-spring );
}

Tips

• Writing long curves by hand is hard. Use an online linear() easing generator and paste the result into a variable.
• Use it on transform and opacity for good performance.
• Respect prefers-reduced-motion for bouncy effects.

Support note

linear() works in all modern browsers.