ITCSS:哪里放CSS动画？

Question

我在最近的项目中使用了ITCSS。

三角形的各层如下：

• 设置-与预处理程序一起使用，并包含字体、颜色定义等。在这一层中，常见的是定义可以自定义模板的变量。
• 工具-全球使用的混合器和功能。只有当我们使用预处理器作为SASS时，才会使用此层。
• 泛型重置和/或规范化样式、框大小定义等。请注意，这是生成CSS的三角形的第一层。
• 元素-为空HTML元素(如H1、A、页眉、页脚、…)设计样式。它们带有来自浏览器的默认样式，因此我们必须在这里重新定义它们。
• 对象-基于类的选择器，它定义未修饰的设计模式，例如从OOCSS中知道的媒体对象，如列表、单选按钮。
• 组件-特定的UI组件。我们页面的组件，例如按钮、卡片、具体列表等。
• 实用程序-实用程序和助手类，它们能够覆盖三角形中前面的任何内容。

取自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中的动画

如果使用动画，多个位置在对象层中定义它。

如果您正在使用preprossor并为不同的组件创建动画，请将其放在工具层中。

如果只有一次动画，则应将其放置在组件层中。