Can you inline the animation name?

Yes, you can inline the animation name directly within the CSS animation property. This is a common practice and is perfectly valid in CSS.

When you define an animation using @keyframes, you typically give it a name. Instead of referencing this name separately in the animation-name property, you can include it directly within the shorthand animation property.

Here's how you can do it:

.element {
  animation: myAnimation 2s linear infinite;
}

@keyframes myAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

In this example, myAnimation is the name of the animation defined using @keyframes. Instead of writing:

.element {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

You can combine all these properties into a single animation property, making your CSS more concise and readable.

The order of values in the animation shorthand property is as follows: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. While only animation-name and animation-duration are required, it's good practice to include at least the duration and timing function for clarity.

Inlining the animation name is a standard and efficient way to define animations in CSS, and it helps keep your stylesheets organized and easier to maintain.

Learn more about this