CSS:easing-function
lastmod 2024-03-30created 2024-03-303 edits
The <easing-function> CSS data type represents a mathematical function that describes the rate at which a value changes.
This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS transition and animation properties.
Transition vs Easing
| WARNING |
| This is a GPT 3.5 answer. Take it with a grain of salt |
"Transition" and "Easing" are both technical concepts used to make animations and transitions smooth and natural, but there are differences between them.
- Transition
- Transition is used in CSS and deals with changes in an element's state.
- The CSS transition property specifies that certain properties of an element change smoothly when they are modified.
- Transition is mainly used when CSS styles change, and sets how smoothly the change proceeds.
- For example, when properties such as background color, size, or position change, you can use transition to make the change smooth.
- Easing
- Easing is mainly used in animation and graphic design, and focuses on controlling the rate at which values change.
- Easing functions control an element's animation to adjust the rate of change.
- Easing functions mainly create natural animation effects by controlling acceleration or deceleration at the start, end, or middle of an animation.
- Common easing functions include linear, ease-in, ease-out, and ease-in-out.
So Transition, as part of CSS, focuses on smoothly handling changes in an element's state, while Easing is used to control the rate at which values change to create smooth motion in animations.
Easing functions cheat sheet
Easing functions specify the rate of change of a parameter over time.
Most real-world objects don't move at a constant speed, and they don't start or stop instantly. Take a drawer: you open it quickly at first, then slowly as it's almost fully open. When you drop an object on the floor, it accelerates downward and bounces back up when it hits the floor.
Python version
# -*- coding: utf-8 -*-
from math import cos, pi, sin, sqrt, pow
from typing import Callable, Final
EasingCallable = Callable[[float], float]
def linear(x):
return x
def ease_in_sine(x):
return 1 - cos((x * pi) / 2)
def ease_out_sine(x):
return sin((x * pi) / 2)
def ease_in_out_sine(x):
return -(cos(pi * x) - 1) / 2
def ease_in_quad(x):
return x * x
def ease_out_quad(x):
return 1 - (1 - x) * (1 - x)
def ease_in_out_quad(x):
if x < 0.5:
return 2 * x * x
else:
return 1 - pow(-2 * x + 2, 2) / 2
def ease_in_cubic(x):
return x * x * x
def ease_out_cubic(x):
return 1 - pow(1 - x, 3)
def ease_in_out_cubic(x):
if x < 0.5:
return 4 * x * x * x
else:
return 1 - pow(-2 * x + 2, 3) / 2
def ease_in_quart(x):
return x * x * x * x
def ease_out_quart(x):
return 1 - pow(1 - x, 4)
def ease_in_out_quart(x):
if x < 0.5:
return 8 * x * x * x * x
else:
return 1 - pow(-2 * x + 2, 4) / 2
def ease_in_quint(x):
return x * x * x * x * x
def ease_out_quint(x):
return 1 - pow(1 - x, 5)
def ease_in_out_quint(x):
if x < 0.5:
return 16 * x * x * x * x * x
else:
return 1 - pow(-2 * x + 2, 5) / 2
def ease_in_expo(x):
if x == 0:
return 0
else:
return pow(2, 10 * x - 10)
def ease_out_expo(x):
if x == 1:
return 1
else:
return 1 - pow(2, -10 * x)
def ease_in_out_expo(x):
if x == 0:
return 0
if x == 1:
return 1
if x < 0.5:
return pow(2, 20 * x - 10) / 2
else:
return (2 - pow(2, -20 * x + 10)) / 2
def ease_in_circ(x):
return 1 - sqrt(1 - pow(x, 2))
def ease_out_circ(x):
return sqrt(1 - pow(x - 1, 2))
def ease_in_out_circ(x):
if x < 0.5:
return (1 - sqrt(1 - pow(2 * x, 2))) / 2
else:
return (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2
c1: Final[float] = 1.70158
c2: Final[float] = c1 * 1.525
c3: Final[float] = c1 + 1
c4: Final[float] = (2 * pi) / 3
c5: Final[float] = (2 * pi) / 4.5
def ease_in_back(x):
return c3 * x * x * x - c1 * x * x
def ease_out_back(x):
return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2)
def ease_in_out_back(x):
if x < 0.5:
return (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
else:
return (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2
def ease_in_elastic(x):
if x == 0:
return 0
if x == 1:
return 1
return -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4)
def ease_out_elastic(x):
if x == 0:
return 0
if x == 1:
return 1
return pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1
def ease_in_out_elastic(x):
if x == 0:
return 0
if x == 1:
return 1
if x < 0.5:
return -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
else:
return (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1
def ease_in_bounce(x):
return 1 - ease_out_bounce(1 - x)
n1: Final[float] = 7.5625
d1: Final[float] = 2.75
def ease_out_bounce(x):
if x < 1 / d1:
return n1 * x * x
elif x < 2 / d1:
x2 = x - (1.5 / d1)
return n1 * x2 * x2 + 0.75
elif x < 2.5 / d1:
x2 = x - (2.25 / d1)
return n1 * x2 * x2 + 0.9375
else:
x2 = x - (2.625 / d1)
return n1 * x2 * x2 + 0.984375
def ease_in_out_bounce(x):
if x < 0.5:
return (1 - ease_out_bounce(1 - 2 * x)) / 2
else:
return (1 + ease_out_bounce(2 * x - 1)) / 2