CSS:easing-function
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 |
| GPT 3.5 답변이다. 알아서 걸러듣자 |
"Transition"과 "Easing"은 모두 애니메이션과 전환을 부드럽고 자연스럽게 만드는 데 사용되는 기술적인 개념이지만, 그 차이점이 존재합니다.
- Transition (트랜지션, 전환)
- Transition은 CSS에서 사용되며, 요소의 상태 변화를 다룹니다.
- CSS의 transition 속성을 사용하여 요소의 특정 속성이 변경될 때 부드럽게 변화하도록 지정합니다.
- Transition은 주로 CSS 스타일이 변경되는 상황에서 사용되며, 이 변경이 얼마나 부드럽게 진행될지를 설정합니다.
- 예를 들어, 배경색이나 크기, 위치 등의 속성이 변경될 때, 해당 변화를 부드럽게 만들기 위해 transition을 사용할 수 있습니다.
- Easing (에이징)
- Easing은 주로 애니메이션 및 그래픽 디자인에서 사용되며, 값의 변화 속도를 조절하는 데 중점을 둡니다.
- Easing 함수는 요소의 애니메이션을 제어하여 변화하는 속도를 조절합니다.
- 에이징 함수는 주로 애니메이션의 시작, 끝, 또는 중간 지점에서 가속 또는 감속을 조절하여 자연스러운 애니메이션 효과를 만듭니다.
- 주요 에이징 함수에는 선형(linear), 이징(ease-in), 이징아웃(ease-out), 이징인아웃(ease-in-out) 등이 있습니다.
따라서 Transition은 CSS의 일부로서 요소의 상태 변화를 부드럽게 다루는 것에 중점을 두고 있으며, Easing은 애니메이션의 부드러운 움직임을 만들기 위해 값의 변화 속도를 조절하는 데 사용됩니다.
Easing 함수 치트 시트
Easing 함수는 시간 흐름에 따른 매개변수의 변화율을 지정합니다.
대부분의 실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않습니다. 서랍을 예로 들자면, 처음에는 빠르게 열다가 거의 다 열었을 때쯤에는 천천히 엽니다. 사물을 바닥에 떨어트렸을 때는 사물이 아래로 가속하다 사물이 바닥을 쳤을 때 튕겨 올라옵니다.
Python 버전
# -*- 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