Easings
Make animations more realistic by picking the right easing function.
āĻ¸ā§āĻā§āĻ°
50
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ°ā§āĻāĻŋāĻ
1.0
āĻŦāĻŋāĻ¨āĻžāĻŽā§āĻ˛ā§āĻ¯ā§/āĻā§āĻ°āĻžāĻ¯āĻŧāĻžāĻ˛ āĻ¸āĻšāĻžāĻ¯āĻŧāĻ¤āĻž
āĻ¸āĻŽāĻ°ā§āĻĨāĻŋāĻ¤
āĻļā§āĻ°ā§āĻ° āĻŽā§āĻ˛ā§āĻ¯
--
āĻ¸āĻ°ā§āĻŦāĻļā§āĻˇ āĻāĻĒāĻĄā§āĻ
āĻāĻĒā§āĻ°āĻŋāĻ˛ 28, 2026
āĻ¸āĻāĻā§āĻˇāĻŋāĻĒā§āĻ¤āĻ¸āĻžāĻ°
Easings āĻā§?
Easings āĻšāĻ˛ āĻāĻāĻāĻŋ āĻāĻĒā§āĻ¨-āĻ¸ā§āĻ°ā§āĻ¸ āĻā§āĻ˛ āĻ¯āĻž āĻāĻāĻŋāĻ āĻĢāĻžāĻāĻļāĻ¨āĻā§āĻ˛āĻŋāĻ° āĻāĻāĻāĻŋ āĻāĻŋāĻ āĻļā§āĻ āĻĒā§āĻ°āĻĻāĻžāĻ¨ āĻāĻ°ā§ āĻ¯āĻž āĻ¸āĻāĻā§āĻāĻžāĻ¯āĻŧāĻŋāĻ¤ āĻāĻ°ā§ āĻ¯ā§ āĻā§āĻāĻžāĻŦā§ āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻāĻžāĻ°āĻā§āĻ˛āĻŋ āĻ¸āĻŽāĻ¯āĻŧā§āĻ° āĻ¸āĻžāĻĨā§ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻŋāĻ¤ āĻšāĻ¯āĻŧ, āĻŦāĻžāĻ¸ā§āĻ¤āĻŦ-āĻŦāĻŋāĻļā§āĻŦā§āĻ° āĻāĻ¤āĻŋ āĻ āĻ¨ā§āĻāĻ°āĻŖ āĻāĻ°ā§ āĻ¯ā§āĻŽāĻ¨ āĻāĻāĻāĻŋ āĻĄā§āĻ°āĻ¯āĻŧāĻžāĻ° āĻā§āĻ˛āĻž āĻŦāĻž āĻāĻāĻāĻŋ āĻŦāĻ¸ā§āĻ¤ā§ āĻĢā§āĻ˛ā§ āĻĻā§āĻāĻ¯āĻŧāĻžāĨ¤
Easings āĻā§ āĻāĻžāĻā§ āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧ?
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§ āĻā§āĻ°ā§āĻĒ
āĻļā§āĻ°ā§āĻˇ āĻŦā§āĻļāĻŋāĻˇā§āĻā§āĻ¯
- āĻŦā§āĻ¯āĻžāĻĒāĻ āĻ¸āĻšāĻā§āĻāĻ°āĻŖ āĻĢāĻžāĻāĻļāĻ¨ āĻ¤āĻžāĻ˛āĻŋāĻāĻž
- CSS āĻāĻŦāĻ PostCSS āĻāĻĻāĻžāĻšāĻ°āĻŖ
- āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻā§āĻĄ āĻ¸ā§āĻ¨āĻŋāĻĒā§āĻ
- āĻāĻŋāĻā§āĻ¯ā§āĻ¯āĻŧāĻžāĻ˛ āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻĒā§āĻ°āĻŋāĻāĻŋāĻ
- āĻŦāĻšā§-āĻāĻžāĻˇāĻž āĻ¸āĻŽāĻ°ā§āĻĨāĻ¨
Easings āĻā§āĻāĻžāĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻŦā§āĻ¨?
āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻ°āĻā§āĻā§āĻā§ āĻŦāĻžāĻ¸ā§āĻ¤āĻŦāĻžāĻ¯āĻŧāĻ¨ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻĄ āĻ¸ā§āĻ¨āĻŋāĻĒā§āĻ āĻāĻŦāĻ āĻāĻŋāĻā§āĻ¯ā§āĻ¯āĻŧāĻžāĻ˛ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻ¸āĻš CSS āĻā§āĻ°āĻžāĻ¨āĻāĻŋāĻļāĻ¨, āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻŦāĻž āĻĒā§āĻ¸ā§āĻāĻ¸āĻŋāĻāĻ¸āĻāĻ¸ āĻĒā§āĻ˛āĻžāĻāĻāĻ¨āĻā§āĻ˛āĻŋāĻ° āĻāĻ¨ā§āĻ¯ āĻ¸āĻšāĻ āĻĢāĻžāĻāĻļāĻ¨ āĻ¨āĻŋāĻ°ā§āĻŦāĻžāĻāĻ¨ āĻāĻ°āĻ¤ā§ āĻāĻŋāĻ āĻļā§āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨āĨ¤
āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻā§āĻ˛
āĻā§āĻ¨ āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻā§āĻ˛ āĻĒāĻžāĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻ¯āĻŧāĻ¨āĻŋ
āĻ¸ā§āĻŦāĻŋāĻ§āĻž & āĻ āĻ¸ā§āĻŦāĻŋāĻ§āĻž
āĻ¸ā§āĻŦāĻŋāĻ§āĻž
- āĻāĻĒā§āĻ¨ āĻ¸ā§āĻ°ā§āĻ¸ āĻāĻŦāĻ āĻŦāĻŋāĻ¨āĻžāĻŽā§āĻ˛ā§āĻ¯ā§
- āĻ¸āĻšāĻā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ¯ā§āĻā§āĻ¯ āĻāĻŋāĻ āĻļā§āĻ
- āĻāĻāĻžāĻ§āĻŋāĻ āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻ°āĻ¯ā§āĻā§āĻ¤āĻŋ āĻ¸āĻŽāĻ°ā§āĻĨāĻ¨ āĻāĻ°ā§
- āĻŦā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻŋāĻā§āĻ¯ā§āĻ¯āĻŧāĻžāĻ˛ āĻāĻāĻĄāĻ¸
āĻ āĻ¸ā§āĻŦāĻŋāĻ§āĻž
- āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻ˛ā§āĻ¯āĻžāĻāĻĢāĻ°ā§āĻŽā§ āĻ¸ā§āĻŽāĻžāĻŦāĻĻā§āĻ§
- āĻā§āĻ¨ āĻāĻ¨ā§āĻ¨āĻ¤ āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻāĻā§āĻļāĻ¨ āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻ¨ā§āĻ
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§āĻ° āĻā§āĻˇā§āĻ¤ā§āĻ°ā§
- āĻāĻ¯āĻŧā§āĻŦ āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻĄāĻŋāĻāĻžāĻāĻ¨
- CSS āĻā§āĻ°āĻžāĻ¨āĻāĻŋāĻļāĻ¨ āĻ āĻĒā§āĻāĻŋāĻŽāĻžāĻāĻā§āĻļāĻžāĻ¨
- āĻŦāĻŋāĻāĻžāĻļāĻāĻžāĻ°ā§āĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻāĻāĻŋāĻ āĻĢāĻžāĻāĻļāĻ¨ āĻļā§āĻāĻž
Easings āĻŽā§āĻ˛ā§āĻ¯
āĻŦāĻŋāĻ¨āĻžāĻŽā§āĻ˛ā§āĻ¯ā§ āĻĒāĻ°āĻŋāĻāĻ˛ā§āĻĒāĻ¨āĻž
āĻā§āĻ¨ āĻŦāĻŋāĻļāĻĻ āĻŽā§āĻ˛ā§āĻ¯ āĻ¤āĻĨā§āĻ¯ āĻāĻĒāĻ˛āĻŦā§āĻ§ āĻ¨ā§āĻ
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻž
1.0
ā§Ģ āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§
1.0
āĻāĻāĻ¨āĻ āĻā§āĻ¨ āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻž āĻ¨ā§āĻ
āĻāĻ āĻā§āĻ˛ā§āĻ° āĻĒā§āĻ°āĻĨāĻŽ āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻžāĻāĻžāĻ°ā§ āĻšāĻ¨!