Tailwind CSS - 过渡属性



Tailwind CSS 过渡属性是一个实用程序类,允许我们将过渡应用于 CSS 属性。

Tailwind CSS 过渡属性类

以下是用于应用平滑过渡的Tailwind CSS 过渡属性类的列表。

类名 CSS 属性
transition-none transition-property: none;
transition-all transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-colors transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-opacity transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-shadow transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-transform transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

Tailwind CSS 过渡属性类的功能

  • transition-none: 此类用于从属性中移除过渡。
  • transition-all: 此类用于将过渡应用于所有属性。
  • transition: 此类是用于对多个属性应用过渡的简写属性。
  • transition-colors: 此类用于应用与颜色相关的过渡。
  • transition-opacity: 此类用于与不透明度相关的过渡。
  • transition-shadow: 此类用于应用与阴影相关的过渡。
  • transition-transform: 此类用于应用与变换相关的过渡。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 过渡属性示例

以下示例将演示各种过渡类的不同过渡效果。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8 bg-green-100"> <h2 class="text-2xl font-bold mb-3"> Tailwind CSS Transition Property Classes </h2> <div class="grid grid-cols-2 gap-2"> <div> <button class="bg-green-500 rounded-3xl p-3 transition-transform hover:scale-90 hover:text-white hover:font-medium"> Hover: Transition-transform </button> </div> <div> <button class="bg-green-500 rounded-3xl p-3 transition-colors hover:text-white hover:font-medium hover:bg-green-700"> Hover: Transition-color </button> </div> <div> <button class="bg-green-500 rounded-3xl p-3 transition hover:opacity-30 hover:text-white hover:font-medium"> Hover: Transition-opacity </button> </div> <div> <button class="bg-green-500 rounded-3xl p-3 transition-shadow hover:shadow-2xl shadow-green-950/40 hover:text-white hover:font-medium"> Hover: Transition-shadow </button> </div> <div> <button class="bg-green-500 rounded-3xl p-3 transition-none hover:text-white hover:font-medium"> Hover: Transition-none </button> </div> </div> </body> </html>
广告