-
Origin-aware animation: An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
- Related: Transform origin is the anchor point a scale or rotation grows or spins from. It's the CSS property that makes this work.
-
Rubber-banding: Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
-
Number ticker: Digits rolling or counting up to a value.
- Pair it with Tabular numbers, which are fixed-width digits so numbers don't shift around as they change. They're essential for tickers, timers, and counters.
-
Skeleton / Shimmer: A placeholder with a moving sheen shown while content loads.
-
Parallax: Background and foreground move at different speeds while scrolling, creating depth.
-
Momentum: Motion that carries velocity, especially after a drag or interruption.
- Related: Velocity is how fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- Related: Drag is moving an element by grabbing it, often with momentum when released.
Test run: six loose descriptions of motion effects. Each returned the glossary term, with related terms where they apply. Short run; the glossary is a fixed list, so effects outside it get an approximation.
하는 일
웹 애니메이션을 위한 역방향 검색 용어집입니다. 보이거나 느껴지는 것('탄력 있게', '미끄러져 나가는', '스스로 그려지는')을 말하면 가장 잘 맞는 용어와 정의를 먼저, 이어서 가까운 후보 한두 개와 차이를 알려 줍니다(예: Clip-path와 Mask, Pop in과 Bounce). 용어집의 설명을 그대로 인용하고, 딱 맞는 것이 없으면 분명히 말하며, 자기 목록 밖의 말은 지어내지 않습니다. 용어집은 등장과 퇴장, 순서와 타이밍, 변형, 상태 간 전환, 스크롤, 피드백, 이징, 스프링, 반복 모션, 마감 효과, 성능, 애니메이션 원칙을 다룹니다.
결과물
용어, 한 줄 정의, 필요하면 가장 가까운 후보.
이런 때 좋습니다
원하는 효과는 알지만 이름을 모르는 개발자, 디자이너, 작가. 디자이너나 AI에게 요청할 정확한 단어가 필요할 때.
낮은 위험：지침만 있는 파일로 스크립트가 없고, 네트워크에 접속하지 않으며, 파일을 쓰지 않습니다. 고정된 용어집이므로 목록에 없는 효과는 근사한 설명이나 해당 용어가 없다는 답이 나옵니다. 모호한 설명 여섯 개로 한 번 시험했고 모두 용어집의 용어를 돌려주었으며 해당되면 관련 용어도 덧붙였습니다. 질문 없이 호출하면 인사만 합니다. 작성자 Emil Kowalski, MIT.