ITCSS: CSS 动画放在哪里？

Question

我正在为我的最新项目使用 ITCSS。

三角形的层数如下：

• 设置——与预处理器一起使用，包含字体、颜色 定义等。在这一层中，常见的是定义变量 可以自定义模板。
• 工具 — 全局使用的 mixin 和函数。该层仅用于 如果我们使用预处理器作为 SASS.
• 通用 — 重置 and/or 规范化样式、box-sizing 定义等。 需要注意的是这是三角形的第一层 生成 CSS.
• 元素 — 裸 HTML 元素的样式（如 H1、A、header、 页脚，...）。这些带有浏览器的默认样式，所以我们 必须在这里重新定义它们。
• Objects — class-based 定义未修饰设计的选择器 模式，例如从 OOCSS 已知的媒体 object，例如列表， radio-button.
• 组件 — 具体 UI 组件。我们页面的组件，对于 例如按钮、卡片、concrete-list 等..
• Utilities — 具有覆盖能力的实用程序和助手 类 三角形中前面的任何内容。

取自https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

但是我的 css 动画放在哪里？

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
          opacity: 1;
     }
 }

1 和 2 不能生成 CSS 因此我希望数字 3（通用）是正确的部分？

谁能证实一下？

Answer 1

itcss 中的动画

如果动画在多个地方使用，在对象层中定义它。
如果您使用预处理器并为不同的组件创建动画，请将其放在 Tools 层 .
如果它是一次性动画，则应将其放置在 组件层