Crafting UI

UI-Animation

The pixel pipeline

Style recalculation

Layout

Paint

Composite

Caused by some event

width,

margin,

left...

background,

box-shadow,

color...

transform,

opacity

Kilde: https://developers.google.com/web/fundamentals/performance/rendering

https://developer.chrome.com/articles/renderingng/

The pixel pipeline

Style recalculation

Layout

Paint

Composite

width,

margin,

left...

background,

box-shadow,

color...

transform,

opacity

Chrome DevTools: Performance Tab

Expensive

The pixel pipeline

Style recalculation

Layout

Paint

Composite

Caused by some event

width,

margin,

left...

background,

box-shadow,

color...

transform,

opacity

Chrome DevTools: Performance panel

Animer med følgende properties, hvis muligt

div {
  transform: translate(n, n)
	     scale(n)
	     skew(ndeg)
	     rotate(ndeg);
  translate: n n;
  scale:     n;
  rotate:    ndeg;
  opacity:   0..1;
}

Animation performance and frame rate

... bør være et standardvalg til hover, press states, drawers, toasts, cards, modals, view/state-skift og microinteractions.

Transforms & opacity...

Animation

Subpixel-animation

Using transform

Changing layout properties

Zoomed ind

Animation

Eksempler

.line {
  /*width: 20%;*/
  transform: scaleX(.2);
}

https://codepen.io/dannievinther/pen/RwwZmqY

.box {
  transform: rotate(45deg) translate(-50%, -50%) scale(1.3);
}

.box:hover {
  transform: rotate(0deg);
}

Transforms

.box {
  rotate: 45deg;
  translate: -50% -50%;
  scale: 1.1;
}

.box:hover {
  rotate: 0deg;
}

Individual Transforms

.box {
  rotate: 45deg;
  translate: -50% -50%;
  scale: 1.1;
}

.box:hover {
  rotate: 0deg;
}

Individual Transforms

Rækkefølgen er prædefineret.

Hvis du skal styre rækkefølgen, så brug transform-funktionen

Individual Transforms

Composition

Linear()

Easing

Linear()

Easing

Linear()

Easing

https://easingwizard.com/

Custom Properties

Boolean Prop

.rotate {
  --intent: 0;
  
  rotate: calc( var(--intent) * 45deg );
  transition: rotate .3s;
  
  &:hover {
    --intent: 1;
  }
}

Brug calc() til at gange variablen med 45deg

Custom Properties

Boolean Prop

.slide-out {
  --open: 0;
  
  translate: calc( var(--open) * 100% );
  transition: translate .4s;
  
  &.open {
    --open: 1;
  }
}

Brug calc() til at gange variablen med 100%

@property --colorPrimary {
  syntax: '<color>';
}

https://web.dev/at-property/

@property

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
}

https://web.dev/at-property/

@property

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

https://web.dev/at-property/

@property

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#typed-custom-properties

@property

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

— typed Custom Properties

https://web.dev/at-property/

Loading...

@property

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

— typed Custom Properties

https://web.dev/at-property/

Loading...

Offset-path & Conic Gradient

Conic-gradient()

Lad os bygge den sammen

(lad den blive åben)

Offset-path

https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path

Offset-path

.parent {
  .child {
    offset-path: border-box;
  }
}

Offset-path

Animeret tal

Popover

Indhold ovenpå indhold

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using

overlay, popup, popover, dialog osv.

popover

backdrop (baggrundslag)

popover

non-modal

modal

vs.

non-modal

modal

vs.

popover

Popover

I sin enkleste form laver du en popover ved at tilføje attributten popover til det element, som skal vise selve popover-indholdet.

Du skal også give elementet et id, så det kan kobles sammen med det element, der åbner popoveren.

Popover

popovertarget

peger på id’et af den popover, der skal styres

bruges til at identificere popoveren og forbinde den med en kontrol

popover

markerer elementet som en popover

-attributter

popover

popovertarget

id

Selectors

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

popover

Selectors

::backdrop

pseudoelement, der repræsenterer det visuelle lag bag en popover

:popover-open

popover-elementet i åben tilstand

[popover]

popover-elementet

[       ]

:popover-open

::backdrop

popover

attribut-selector

display-egenskab

Ændr ikke display direkte — brug :popover-open til at style, når popover'en er synlig.

[popover] { /* eller #min-popover */
  display: grid;
}

[popover]:popover-open {
  display: grid;
}

🚫

✅

Popover

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

Popover demo

@starting-style

Når et element vises for første gang – eller går fra display: none; til synligt – starter CSS-transitions ikke automatisk.

Browseren har nemlig ingen tidligere stil at animere fra.

@starting-style

@starting-style løser det ved at give elementet nogle startværdier, som browseren kan animere fra, når det dukker op.

@starting-style

.wrapper:hover .circle {
  scale: 4;
  display: block;
}
@starting-style {
  .wrapper:hover .circle {
    scale: 1;
  }
}

display: block;

Popover

@starting-style {
  ...
}

transition-behavior: allow-discrete;

:popover-open {
  ...
}

Animation

Popover

@starting-style {
  ...
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  translate: 0 -100%;
}

:popover-open {
  opacity: 1;
  translate: 0 0;
}

Animation

Popover

@starting-style {
  ...
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  translate: 0 -100%;
}

:popover-open {
  opacity: 1;
  translate: 0 0;
}

Animation

Popover

@starting-style {
  opacity: 0;
  translate: 0 100%;
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  translate: 0 -100%;
}

:popover-open {
  opacity: 1;
  translate: 0 0;
  
  
  
  
  
  
}

Exit state

Entry state

Open state

Popover

Exit state

Entry state

Open state

CSS transitions

{
  transition: 1s;
}

CSS transitions

display: none;

{
  transition: 1s;
}

Transition-behavior

{
  transition: 1s allow-discrete;
}

display: none;

venter 1 sekund

transition-behavior

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior

Popover Pattern

https://nerdy.dev/steal-this-popover-starter-kit

Crafting UI: UI-animation

By Dannie Vinther

Crafting UI: UI-animation

Crafting UI w/ CSS

Dannie Vinther PRO

dannievinther

Crafting UI

The pixel pipeline

The pixel pipeline

The pixel pipeline

Animer med følgende properties, hvis muligt

Transforms & opacity...

Subpixel-animation

Using transform

Changing layout properties

Zoomed ind

Eksempler

Transforms

Individual Transforms

Individual Transforms

Individual Transforms

Composition

Composition

Composition

Linear()

Easing

Linear()

Easing

Linear()

Easing

Custom Properties

Custom Properties

@property

@property

@property

@property

— typed Custom Properties

Loading...

@property

— typed Custom Properties

Loading...

Offset-path & Conic Gradient

Conic-gradient()

Lad os bygge den sammen

Offset-path

Offset-path

Offset-path

Animeret tal

Popover

Popover

Popover

Popover

-attributter

Selectors

Selectors

display-egenskab

🚫

✅

Popover

@starting-style

@starting-style

@starting-style

@starting-style

Popover

Popover

Popover

Popover

Popover

CSS transitions

CSS transitions

Transition-behavior

transition-behavior

transition-behavior

Popover Pattern

Crafting UI: UI-animation

More from Dannie Vinther