16 lines
1 KiB
HTML
16 lines
1 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body)}
|
|
.track{position:relative;height:6px;background:var(--ground-sunk);border-radius:3px;margin:18px 0 10px}
|
|
.dot{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--ink-900);animation:slide 2.6s var(--ease-out) infinite alternate}
|
|
@keyframes slide{from{left:0}to{left:calc(100% - 16px)}}
|
|
.meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);line-height:1.7}
|
|
.acc{color:var(--accent-deep)}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="track"><div class="dot"></div></div>
|
|
<p class="meta">dur-fast <span class="acc">200ms</span> · dur-base <span class="acc">300ms</span> · dur-slow <span class="acc">400ms</span><br>ease-out cubic-bezier(.22, 1, .36, 1) — slow, eased, short-travel<br>one signature motion moment per view · respects reduced-motion</p>
|
|
</div>
|
|
</body></html>
|