CSSXS - Sda

Lad tre kort tone ind forskudt 10 / 11

Få de tre kort til at tone ind og bevæge sig op forskudt fra venstre mod højre, mens containeren kommer ind og bevæger sig videre gennem scrollporten. Knyt alle kortene til containerens fælles timeline --cards.

Brug forskellige animation-range på kortene: Lad det første animere fra entry 0% til entry 100%, det andet fra entry 50% til contain 25% og det tredje fra entry 100% til contain 50%. Det tredje kort begynder dermed først, når containeren er helt inde i scrollporten. Keyframes med en bevægelse på 4rem er allerede angivet.

Prøv derefter at bytte om på kortenes ranges, så det højre kort kommer ind først. Bemærk, at forskydningen følger scrollpositionen, også når du scroller tilbage.

Hints

animation-timeline
animation-range

--cards
entry 0% entry 100%
entry 50% contain 25%
entry 100% contain 50%

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  view-timeline: --cards;
}
.box {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: 1rem;
  animation: appear ease-out both;
  animation-timeline: ;
}
.box-1 {
  animation-range: ;
}
.box-2 {
  animation-range: ;
}
.box-3 {
  animation-range: ;
}
@keyframes appear {
  from {
    opacity: 0;
    translate: 0 4rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

<div class="scrollport">	
	<div style="height:100%"></div>
	<div class="container">
	  <div class="box box-1">Kort 1</div>
	  <div class="box box-2">Kort 2</div>
	  <div class="box box-3">Kort 3</div>
	</div>
	<div style="height:100%"></div>
</div>

<div class="scrollport">	
	<div style="height:100%"></div>
	<div class="container">
	  <div class="box box-1">Kort 1</div>
	  <div class="box box-2">Kort 2</div>
	  <div class="box box-3">Kort 3</div>
	</div>
	<div style="height:100%"></div>
</div>

Har du brug for hjælp? Lær mere om animation-range

Kort 1

Kort 2

Kort 3

Om øvelserne

Sådan laver du en øvelse

Lad tre kort tone ind forskudt 10 / 11