CRAFTING UI

Frontend Design

UI-Animation

Animeret Doughnut Chart, Popover, Anchor Positioning, Accordion

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...

.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

1

2

3

Individual Transforms

Linear()

Easing

Linear()

Easing

https://easingwizard.com/

Animeret charts

Ingredienser:

  • @property
  • counter()
  • round()
@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/

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...

@property

ol {
  counter-reset: list-item;
}

li {
  counter-increment: list-item;
  
  &::marker {
    content: counter(list-item) ". ";
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/counter​

counter()

browser styles

counter()

counter()

Animeret charts

Lad os animere cirklerne

Åbn øvelse

Forbehold:

I denne øvelse animerer vi cirklen på :hover via en transition, for at afprøve teknikken.

 

I temaopgaven bør animationen være styret af @keyframes, så de kan animere ved et trigger-punkt (scroll-triggered animation).

Popover

Indhold ovenpå indhold

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

+ Anchor Positioning

overlay, popup, popover, dialog osv.

popover

backdrop (baggrundslag)

popover

non-modal

modal

vs.

Jeg kan interagere med resten af siden

non-modal

modal

vs.

popover

<dialog>

Jeg kan ikke interagere med resten af siden

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

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

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

Popover

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

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

-attributter

popover
popovertarget
id
popovertarget

Popover

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

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

-attributter

popover
popovertarget
id

Åbn øvelse

Popover

popovertarget

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

id

bruges til at identificere popoveren og forbinde den med en kontrol

popover

markerer elementet som en popover

-attributter

popover
popovertarget
id

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;
}

🚫

✅

Anchor Positioning

Placér et element i forhold til et andet element 

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

Anchor Positioning

https://css-tip.com/position-area/

Properties

Anchor Positioning

Anchor Positioning

[popover] {
  position-area: top;
}

[..] automatically links the invoker button to the popover element

Anchor Positioning

Anchor Positioning

Basic Burgermenu

Anchor Positioning

Dynamisk positionering

CSS transitions

CSS transitions

.circle {
  /*...*/
  transition: 300ms;
}

Se eksempel

CSS transitions

.circle {
  /*...*/
  transition: all 300ms ease;
}

CSS transitions

.circle {
  /*...*/
  transition-duration: 300ms;
  transition-behavior: normal;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: all;
}

CSS transitions

0s

1s

{
transition: 1s;
}

CSS transitions

0s

1s

{
transition: 1s;
}

display: none;

Transition-behavior

0s

1s

{
transition: 1s allow-discrete;
}

display: none;

venter 1 sekund

@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

0s

1s

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

start her

display: block;

Popover

Hvordan relaterer det sig til popover?

@starting-style {
  ...
}
transition-behavior: allow-discrete;
:popover-open {
  ...
}

Popover transition

@starting-style {
  ...
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  ...
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  opacity: 0;
  rotate: -360deg;
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;

  
  
  
    
  
}

Lukket

Før åben

Åben

Popover transition

Lukket

Før åben

Åben

Popover transition

Eksempel

Accordion

Afsløring af indhold

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details​

details / summary

<details> laver en åbn/luk-sektion, hvor ekstra indhold kun vises, når den er åben.


<summary> bruges til at angive den titel eller overskrift, der vises, når sektionen er lukket.

 

Browseren viser typisk en lille trekant ved siden af teksten, som roterer ved åbning.

details / summary

<details>
  <summary>Titel</summary>
  
  <div>
    <p>Indholdet vises kun, når &lt;details&gt; er åben.</p>
  </div>
</details>

-attributter

Åben demo

details

name

grupperer flere <details​>—elementer, så kun ét kan være åbent ad gangen.

open

angiver, om indholdet vises

-attributter

<details open>
  ...
</details>
<details name="my-detail">
  ...
</details>

<details name="my-detail">
  ...
</details>
open
name

Selectors

::details-content

repræsenterer det område i <details>, som kan foldes ud eller skjules.

summary::marker

trekanten foran <summary>. Kan ændres eller fjernes via content.

details[open]

details-elementet i åben tilstand

details[open]
summary::marker
::details-content

Simpel indikator

Fjern standardpil med ::marker, og tilføj dit eget ikon med ::after.

/* Fjern eksisterende pil */
summary::marker {
  content: none;
}
summary::after {
  content: '+';
  font-family: system-ui;
  font-weight: 400;
  font-size: 1.1rem;
}

[open] summary::after {
  content: '–';
}

Animeret fold-ud

fra 0 til auto

Animeret fold-ud

Animeret fold-ud

<details name="something">
  <summary>Titel</summary>
  <div>
    <!-- indhold -->
  </div>
</details>
:root {
  interpolate-size: allow-keywords;
}

::details-content {
  height: 0;
  overflow: clip;
  transition: .3s allow-discrete;
}

[open]::details-content {
  height: auto;
}

Crafting UI: Animation

By Dannie Vinther

Crafting UI: Animation

Crafting UI w/ CSS

  • 148

More from Dannie Vinther