Transition.css：简化网页动画的开源工具

在现代网页设计中，动画效果不仅能提升用户体验，还能有效引导用户的注意力。Transition.css 是一个开源的 CSS 动画库，旨在简化网页中的过渡动画，使得开发者能够轻松地为网页元素添加动态效果。无论是设计师还是开发者，都能从中受益。

kitchen-sink

基本使用

要使用 Transition.css，首先需要引入 CSS 文件。可以通过 NPM 安装，也可以直接使用 CDN 链接。以下是基本的引入方式：

通过 NPM 安装：

npm i transition-style

然后在 CSS 文件中导入：

@import "transition-style";

通过 CDN 引入：直接在 HTML 中添加链接：

<link rel="stylesheet" href="https://unpkg.com/transition-style">

在添加了 Transition.css 之后，开发者只需在 HTML 元素上设置相应的 transition-style 属性，就可以实现动画效果。例如：

wipe-up

<div transition-style="in:wipe:up">
  👍
</div>

通过这种简单的方式，用户就可以看到精美的动画效果。

版本更新与新功能

Transition.css 最近推出了 2.0 版本，增加了许多新特性，包括 CSS Grid 布局、全新的 UI 设计和新的组件系统等。这些更新使得工具更加快速和易于访问，让开发者和设计师都能更加高效地工作。

分类与定制

Transition.css 提供了多个分类的样式包，用户可以根据需要引入特定的样式包。例如：

Circles：https://unpkg.com/transition-style/transition.circles.min.css
Squares：https://unpkg.com/transition-style/transition.squares.min.css
Polygons：https://unpkg.com/transition-style/transition.polygons.min.css
Wipes：https://unpkg.com/transition-style/transition.wipes.min.css

此外，还有一个名为“The Hackpack”的选项，允许开发者仅导入自定义属性和基本样式，从而实现更多的过渡组合和控制，适应不同的开发环境。

快速测试功能

为了让开发者能在几乎任何现有网站上尝试 Transition.css，提供了一个书签小工具。用户只需将以下代码复制到书签中，便可在浏览器中使用：

javascript:(function(){var a=document.createElement("link");a.rel="stylesheet";a.href="https://unpkg.com/transition-style";document.head.append(a);})();

使用这个书签后，用户可以在网页上快速体验 Transition.css 的效果，无需修改网站的原始代码。

高级用法

Transition.css 的设计思路是基于属性的方式，使得每次只能有一个动画状态。这种状态机的方法有效避免了类名冲突的问题。用户可以使用 @keyframes 来定义自定义动画，并通过 CSS 自定义属性来实现动画的持续时间、缓动效果和延迟等参数。例如：

opposing-corner-fold

.main--state-in {
  animation: wipe-in-left;
  animation-duration: 2s;
  animation-fill-mode: both;
}

对于想要进一步定制的用户，Transition.css 允许用户定义自定义过渡效果，例如：

@keyframes circle-swoop {
  from {
    clip-path: var(--circle-top-right-out);
  }
  to {
    clip-path: var(--circle-bottom-right-in);
  }
}

.--in-custom {
  --transition__duration: 1s;
  --transition__easing: ease-in-out;
  animation-name: circle-swoop;
}

使用这样的方式，开发者可以发挥创意，创建独特的动画效果。

总结

Transition.css 是一个强大的工具，旨在简化网页动画的实现过程。无论是简单的过渡效果还是复杂的自定义动画，Transition.css 都能为开发者提供所需的灵活性和控制力。通过简单的引入和使用方式，用户能够迅速提升网页的交互性和美观度。Transition.css 的开源特性也让其在开发者社区中得到了广泛的支持和应用，是现代网页设计中不可或缺的一部分。

👉 https://github.com/argyleink/transition.css