Quick RSS Feed: Transition.css：简化网页动画的开源工具 #33

README.md

@@ -58,6 +58,11 @@ https://wangchujiang.com/quick-rss/feed.xml
 
 <!--RSS_LIST_START-->
 
+## [Transition.css：简化网页动画的开源工具](https://wangchujiang.com/quick-rss/issue/33.html) 
+
+![](https://github.com/user-attachments/assets/2d637a57-ee7f-4b81-af6e-0b6fc7b91d57)
+
+在现代网页设计中，动画效果不仅能提升用户体验，还能有效引导用户的注意力。Transition.css 是一个开源的 CSS 动画库，旨在简化网页中的过渡动画，使得开发者能够轻松地为网页元素添加动态效果。无论是设计师还是开发者，都能从中受益。 基本使用 要使用 Transition.css，首先需要引入 CSS 文件。可以通过 NPM 安装，也可以直接使用 CDN 链接。以下是基本的引入方式： 通过 ([#33](https://github.com/jaywcjlove/quick-rss/issues/33) - [@jaywcjlove](https://github.com/jaywcjlove))
 ## [Penpot：开源设计工具，促进设计与代码的协作](https://wangchujiang.com/quick-rss/issue/32.html) 
 
 ![](https://github.com/user-attachments/assets/3f994566-83ee-4278-906a-89883e717866)

README.zh.md

@@ -56,6 +56,11 @@ https://wangchujiang.com/quick-rss/feed.xml
 
 <!--RSS_LIST_START-->
 
+## [Transition.css：简化网页动画的开源工具](https://wangchujiang.com/quick-rss/issue/33.html) 
+
+![](https://github.com/user-attachments/assets/2d637a57-ee7f-4b81-af6e-0b6fc7b91d57)
+
+在现代网页设计中，动画效果不仅能提升用户体验，还能有效引导用户的注意力。Transition.css 是一个开源的 CSS 动画库，旨在简化网页中的过渡动画，使得开发者能够轻松地为网页元素添加动态效果。无论是设计师还是开发者，都能从中受益。 基本使用 要使用 Transition.css，首先需要引入 CSS 文件。可以通过 NPM 安装，也可以直接使用 CDN 链接。以下是基本的引入方式： 通过 ([#33](https://github.com/jaywcjlove/quick-rss/issues/33) - [@jaywcjlove](https://github.com/jaywcjlove))
 ## [Penpot：开源设计工具，促进设计与代码的协作](https://wangchujiang.com/quick-rss/issue/32.html) 
 
 ![](https://github.com/user-attachments/assets/3f994566-83ee-4278-906a-89883e717866)

docs/issue/33.md

@@ -0,0 +1,116 @@
+Transition.css：简化网页动画的开源工具
+===
+
+在现代网页设计中，动画效果不仅能提升用户体验，还能有效引导用户的注意力。Transition.css 是一个开源的 CSS 动画库，旨在简化网页中的过渡动画，使得开发者能够轻松地为网页元素添加动态效果。无论是设计师还是开发者，都能从中受益。
+
+![kitchen-sink](https://github.com/user-attachments/assets/2d637a57-ee7f-4b81-af6e-0b6fc7b91d57)
+
+
+### 基本使用
+
+要使用 Transition.css，首先需要引入 CSS 文件。可以通过 NPM 安装，也可以直接使用 CDN 链接。以下是基本的引入方式：
+
+1. **通过 NPM 安装**：
+   ```bash
+   npm i transition-style
+   ```
+   然后在 CSS 文件中导入：
+   ```css
+   @import "transition-style";
+   ```
+
+2. **通过 CDN 引入**：
+   直接在 HTML 中添加链接：
+   ```html
+   <link rel="stylesheet" href="https://unpkg.com/transition-style">
+   ```
+
+在添加了 Transition.css 之后，开发者只需在 HTML 元素上设置相应的 `transition-style` 属性，就可以实现动画效果。例如：
+
+![wipe-up](https://github.com/user-attachments/assets/a0341d5f-6118-4a79-896b-836c9cee1027)
+
+```html
+<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
+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](https://github.com/user-attachments/assets/d3fb4503-25d5-4bbe-880c-8c9a5ee87225)
+
+```css
+.main--state-in {
+  animation: wipe-in-left;
+  animation-duration: 2s;
+  animation-fill-mode: both;
+}
+```
+
+对于想要进一步定制的用户，Transition.css 允许用户定义自定义过渡效果，例如：
+
+```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
+
+---
+
+<p align="center">
+<a href="https://github.com/argyleink/transition.css" target="_blank">🔗 查看链接</a> • 
+<a href="https://github.com/jaywcjlove/quick-rss/issues/new/choose" target="_blank">投稿/推荐/自荐</a> • 
+<a href="https://wangchujiang.com/quick-rss/feeds/index.html" target="_blank">Quick RSS</a> • 
+<a href="https://github.com/jaywcjlove/quick-rss/issues/33" target="_blank">#33</a> • 
+<a href="https://github.com/jaywcjlove" target="_blank">@jaywcjlove</a>
+</p>
+
+---
+

feeds/README.md

@@ -11,6 +11,11 @@ https://wangchujiang.com/quick-rss/feed.xml
 
 <!--RSS_LIST_START-->
 
+## [Transition.css：简化网页动画的开源工具](https://wangchujiang.com/quick-rss/issue/33.html) 
+
+![](https://github.com/user-attachments/assets/2d637a57-ee7f-4b81-af6e-0b6fc7b91d57)
+
+在现代网页设计中，动画效果不仅能提升用户体验，还能有效引导用户的注意力。Transition.css 是一个开源的 CSS 动画库，旨在简化网页中的过渡动画，使得开发者能够轻松地为网页元素添加动态效果。无论是设计师还是开发者，都能从中受益。 基本使用 要使用 Transition.css，首先需要引入 CSS 文件。可以通过 NPM 安装，也可以直接使用 CDN 链接。以下是基本的引入方式： 通过 ([#33](https://github.com/jaywcjlove/quick-rss/issues/33) - [@jaywcjlove](https://github.com/jaywcjlove))
 ## [Penpot：开源设计工具，促进设计与代码的协作](https://wangchujiang.com/quick-rss/issue/32.html) 
 
 ![](https://github.com/user-attachments/assets/3f994566-83ee-4278-906a-89883e717866)