<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<p>This element has no transition.</p>
</section>
<section>
<p>This element has a transition!</p>
</section>
</body>
</html>
body {
--base: 20px;
display: grid;
font-family: 'Helvetica', sans-serif;
gap: var(--base);
padding: var(--base);
}
section {
background-color: gold;
padding: calc(var(--base) / 2);
}
h2 { font-size: calc(var(--base) * 3); }
section:hover {
background-color: aquamarine;
transform: scale(105%);
}
section:nth-child(2) {
transition-duration: 2s, 1s;
transition-property: background-color, transform;
transition-timing-function: linear, ease-in-out;
will-change: transform;
}