HTML en CSS leren: Een zachte overgang met transition

Transition

Als je de muis op de knop zet, springt hij in één klap van rood naar blauw. "Daar schrik je van," zegt Walter. Een zachte overgang voelt rustiger, en de site ziet er meteen afgewerkt uit.

Een zachte overgang

Met transition gaat een verandering geleidelijk in plaats van in één klap. transition: background-color 0.2s laat de achtergrondkleur in 0,2 seconden overgaan. Zet de transition op het element zelf, niet op :hover, zodat de kleur ook zacht terugkeert als de muis weggaat. Hou het kort: tussen 0,15 en 0,3 seconden voelt vlot.

Ook een kleine verschuiving kan zacht: transform: translateY(-4px) tilt een tafel 4px op, zonder de rest van de pagina te verschuiven.

Wie op zijn toestel minder beweging vraagt, krijgt met @media (prefers-reduced-motion: reduce) beter geen overgang. Zet de muis op de knop en op de tafels.

style.css

1.knop {2  transition: background-color 0.2s;3}4.knop:hover {5  background-color: #1f4e5f;6}7.tafel {8  transition: transform 0.2s;9}10.tafel:hover {11  transform: translateY(-4px);12}13@media (prefers-reduced-motion: reduce) {14  .knop,15  .tafel {16    transition: none;17  }18}

repaircafe.example

Probeer het zelf

Laat de knop bij hover in 0.2 seconden zacht donkerblauw worden, #1f4e5f, en ook zacht terugkeren.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een zachte overgang

Ook een kleine verschuiving kan zacht: transform: translateY(-4px) tilt een tafel 4px op, zonder de rest van de pagina te verschuiven.

Wie op zijn toestel minder beweging vraagt, krijgt met @media (prefers-reduced-motion: reduce) beter geen overgang. Zet de muis op de knop en op de tafels.

style.css

1.knop {2  transition: background-color 0.2s;3}4.knop:hover {5  background-color: #1f4e5f;6}7.tafel {8  transition: transform 0.2s;9}10.tafel:hover {11  transform: translateY(-4px);12}13@media (prefers-reduced-motion: reduce) {14  .knop,15  .tafel {16    transition: none;17  }18}

repaircafe.example

Probeer het zelf

Laat de knop bij hover in 0.2 seconden zacht donkerblauw worden, #1f4e5f, en ook zacht terugkeren.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example