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-short

.duration-moderate

.duration-long

.duration-very-long

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

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

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

Ease#

.ease-in-out

.ease-in

.ease-out

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

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