Porsche Design System

Motion

Table of Contents

Duration
Ease

The Porsche Design System Tailwind theme customizes the Tailwind variables --transition-duration-* and --ease-*, which affect multiple Tailwind classes including .duration-*, .ease-* and others.

Duration#

.duration-sm

.duration-md

.duration-lg

.duration-xl

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="grid gap-fluid-md prose-text-sm">
  <div class="duration-sm transition-transform transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .duration-sm
  </div>
  <div class="duration-md transition-transform transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .duration-md
  </div>
  <div class="duration-lg transition-transform transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .duration-lg
  </div>
  <div class="duration-xl transition-transform transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .duration-xl
  </div>
</div>
<script>

</script>
</body>
</html>

Ease#

.ease-in-out

.ease-in

.ease-out

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="grid gap-fluid-md prose-text-sm">
  <div class="ease-in-out transition-transform duration-very-long transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .ease-in-out
  </div>
  <div class="ease-in transition-transform duration-very-long transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .ease-in
  </div>
  <div class="ease-out transition-transform duration-very-long transform hover:scale-120 rounded-lg bg-surface p-fluid-sm">
    .ease-out
  </div>
</div>
<script>

</script>
</body>
</html>