La definición de los keyframes en el sistema ITCSS no tienen un lugar específico donde vivir.
Si necesitas crear keyframes para alguna animación, yo te recomiendo hacer una capa previa a los objetos.
Podrías crear una capa que se llamase keyframes con el archivo keyframes.scss y definir todos los keyframes allí.
En el sistema ITCSS (o dentro de BEMIT CSS) tienes libertad para hacer lo que creas más cómodo.
Mira la opción que yo te propongo es la siguiente, tu archivo principal de SCSS se vería así:
// SETTINGS
@import "settings/_settings";
// TOOLS - (FUNCS - MIXINS)
@import "tools/_functions";
@import "tools/_mixins";
// GENERIC
@import "generic/_generic";
// TAGS
@import "tags/_tags";
// KEYFRAMES
@import "keyframes/_keyframes";
// OBJECTS
@import "objects/_col";
@import "objects/_container";
// COMPONENTS
@import "components/_footer";
@import "components/_header";
@import "components/_tabs";
// UTILITIES
@import "utilities/_utilities";El archivo keyframes.scss quedaría así:
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}Tu estructura de carpetas, se vería así:
Esta clase es parte de un curso que he creado en udemy, si te interesa profundizar más, en este artículo te cuento de que va este curso aquí: metodología BEMIT CSS