ITCSS: where to put CSS animations?

Question

I'm using ITCSS for my latest project.

The layers of the triangle are the follows:

• Settings — used with preprocessors and contain font, colors definitions, etc. In this layer is common define the variables that can customize the template.
• Tools — globally used mixins and functions. This layer is only used if we use a preprocessor as SASS.
• Generic — reset and/or normalize styles, box-sizing definition, etc. It is important to note that this is the first layer of the triangle that generates CSS.
• Elements — styling for bare HTML elements (like H1, A, header, footer, …). These come with default styling from the browser so we must to redefine them here.
• Objects — class-based selectors which define undecorated design patterns, for example media object known from OOCSS such as list, radio-button.
• Components — specific UI components. The components of our page, for example button, card, concrete-list, etc..
• Utilities — utilities and helper classes with ability to override anything which goes before in the triangle.

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

but where do I put my css animations?

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
          opacity: 1;
     }
 }

1 and 2 must not generate CSS therefore I expect number 3 (Generic) is the right section?

Can anyone confirm?

Answer 1

Animations in itcss

If the animation is used multiple places define it in the Object layer.
If you are using a preprossor and create animations for different components put it in the Tools layer.
If its a one time only animation it should be placed in the Component layer