NibCSS

Animations & micro-interactions

Transitions, hover effects, keyframe animations and reduced-motion support.

1 min readv1

Hover lift#

HTML
Hover me
<div nib="w=220px; p=18px; bdrd=14px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; ts=transform .2s ease, box-shadow .2s ease; hover:tf=translateY(-4px); hover:bxsh=0 14px 30px rgba(15,23,42,.12); cur=pointer">Hover me</div>

Pressed feedback#

HTML
<button nib="p=10px 18px; bdrd=10px; bd=none; bgc=#0f172a; cl=#fff; cur=pointer; ts=transform .08s; active:tf=scale(.96)">Press</button>

Underline that grows#

HTML
Hover this link
<a href="#" nib="pos=relative; cl=#4F52D9; txd=none; ftw=600; after:cnt=''; after:pos=absolute; after:l=0; after:b=-2px; after:h=2px; after:w=100%; after:bgc=currentColor; after:tf=scaleX(0); after:tfo=left; after:ts=transform .25s; hover:after:tf=scaleX(1)">Hover this link</a>

Pseudo-element modifiers chain with state modifiers: hover:after:tf=scaleX(1).

Keyframes#

Define them once in global CSS and reference with an:

CSS
@keyframes pulse { 50% { opacity: .4 } }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px) } }
HTML
<span nib="an=pulse 1.4s ease-in-out infinite">●</span>
<li nib="an=slide-up .3s ease both; any=.05s">…</li>

Respect reduced motion#

CSS
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

Next steps#