To make an animation run indefinitely, you should set the animation-iteration-count property to the value infinite. This ensures that the animation will keep running continuously without a specified end point.

The steps value of the animation-timing-function property divides the animation into a series of distinct intervals, creating a frame-by-frame animation effect, similar to a flipbook. You specify the number of steps, like steps(4), to control the number of frames.

SASS/SCSS allows you to use variables to define styles and apply them conditionally. In this scenario, you should use SASS/SCSS variables to define common styles and then create a single class with conditional styles based on these variables to apply the slight variations to multiple elements. This promotes code reusability and maintainability.

The mix-blend-mode property in CSS is used to control how elements blend when they overlap. It's used to specify how the colors of elements should be mixed, based on a defined blending mode, to create various visual effects.

To define a container as a grid layout, you should use the display: grid; CSS property. This property tells the browser to treat the specified container as a grid, enabling you to create grid-based layouts within it.

To define a custom property (or variable) in CSS, you use the format --variable: value;. Custom properties start with a double hyphen (--) and are followed by the property name, a colon, and the value. These custom properties can then be used to store and reuse values throughout your stylesheet.

The value for the animation-direction property determines how animations behave after they complete. To run animations in reverse order after completion, you should set animation-direction to reverse. This will play the animation backward.

To make a box 10% of the viewport width, you should use the 'vw' (viewport width) unit. The 'vw' unit is based on the width of the viewport, making it ideal for responsive design. It ensures the box is always a percentage of the viewport's width, regardless of the screen size.

SMACSS categorizes its styles by specificity. In SMACSS, styles are organized into five categories: Base, Layout, Module, State, and Theme. This categorization helps in creating a scalable and maintainable CSS architecture by defining how styles should be applied and structured.

For an element with position: sticky; to work, the parent container must have a defined overflow property (e.g., overflow: auto;). This allows the element to stick within the scrolling container when it reaches a certain point, behaving as if it's "stuck" to the viewport.