Crafting UI

UI-Animation

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

Caused by some event

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

Animation

Chrome DevTools: Performance panel

Animation

Brugerne bemærker, når billedfrekvenser varierer.

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

Animation performance and frame rate

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 {
  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/

.object-1 {
  --move-to: 100px;
}

.object-2 {
  --move-to: 400px;
}

[class|="object"] {
  animation: move 1s linear forwards;
}

@keyframes move {
  to {
    translate: var(--move-to);
  }
}

We can do this

Or this

Custom Properties

dry

Loading...

Custom Properties

Boolean Prop

https://css.land/ranges/

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

Brug calc() til at gange variablen med 45deg

0 * 45deg = 0deg

1 * 45deg = 45deg

Custom Properties

Boolean Prop

.slide-out {
  --open: 0;
  
  translate: calc( var(--open) * 100% );
  
  &.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...

@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()

body {
  height: 100svh;
  background:
    conic-gradient(red, blue);
}

pen.new

Lad os bygge den sammen

(lad den blive åben)

Offset-path

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

https://fullystacked.net/offset-path/

Offset-path

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

Offset-path

Animeret tal

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>

(lad den blive åben)

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

@starting-style

transition-behavior

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

Popover Pattern

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

UI Challange

Accordion

Find branchen "accordion" på vores GitHub-repository

Mål: Bygge "levende" sites

Scroll-driven animations

https://scroll-driven-animations.style/

Scroll driven animation

.element {
  animation: progress linear both;
  animation-timeline: scroll(block root);
}

Scroll-driven animation

Brug dokumentet som tidslinje

.element {
  animation: progress linear both;
  animation-timeline: scroll(); /* nearest */
}

Scroll-driven animation

Brug dokumentet som tidslinje

pen.new

.element {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

Scroll-driven animation

https://scroll-driven-animations.style/tools/view-timeline/ranges/

Hold øje med et element ift. viewporten

Scroll-driven animation

h1 {
  animation: ;
  animation-timeline: ;
  animation-range: ;
}

https://scroll-driven-animations.style/tools/view-timeline/ranges/

Scroll driven animation

Optimized flip-animations

View transitions

https://live-transitions.pages.dev/

View Transitions

View Transition

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

View Transition

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  document.startViewTransition(_ => grid.classList.toggle("col-count"));
});

View Transition

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  if (document.startViewTransition) {
    document.startViewTransition(_ => grid.classList.toggle("col-count"));
  } else {
    grid.classList.toggle("col-count");
  }
});

View Transition

.box-1 {
  view-transition-name: box-1;
}

::view-transition-new(box-1) {
  animation: scale-in .5s both;
}

::view-transition-old(box-1) {
  animation: scale-in .5s both reverse;
}

Crafting UI: UI-animation

By Dannie Vinther

Crafting UI: UI-animation

Crafting UI w/ CSS

7 months ago
104

Dannie Vinther PRO

dannievinther