Intro to CSS Animation: @keyframes, the animation Property, and vs. transition

On a website, a button color softly shifts when you hover over it, a menu slides smoothly into view, a loading icon spins around and around... much of this "motion" is built with CSS animation alone. Without writing a single line of JavaScript, you can make elements change over time using only CSS. This article walks beginners step by step through the basics of CSS animation: the @keyframes rule and the animation property.

What Is CSS Animation

CSS animation is a mechanism for changing how an element looks over time using only CSS. You can smoothly transition properties such as color, position, size, opacity, and rotation from a "start state" to an "end state," or even through finely specified intermediate steps.

CSS animation is made of two parts. One is the blueprint of the motion (@keyframes), which describes which properties change and how. The other is the animation property, which specifies how many seconds the blueprint plays over, with what speed curve, and how many times. Thinking of the blueprint and the playback settings separately makes CSS animation far easier to understand.

Because you can express motion without JavaScript, the code is simple and the browser can optimize it well. It shines in a wide range of situations, from a small hover flourish to a loading spinner to a blink that draws attention to an element.

Defining Motion with @keyframes

The @keyframes rule is where you write the blueprint of the motion. You give the animation a name and specify styles at each point of progress (0% to 100%, or from and to).

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

This is an animation named "fade-in" designed so that at the start (from = 0%) it is transparent and at the end (to = 100%) it is opaque. The browser automatically interpolates the values in between, producing a soft fade-in.

You can specify not only 0% and 100% but also intermediate steps. For example, the following creates a bouncing up-and-down motion.

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

The more finely you slice the progress, the more complex the motion you can express. That said, building up which value to use at which percentage entirely in your head is hard. The CSS Keyframes Generator, which lets you preview motion as it writes out the @keyframes code, makes it easy to design the blueprint while checking it visually.

Inside the animation Property

Once you have the blueprint in @keyframes, you apply it to an element and specify how it plays. That job belongs to the animation properties. Get comfortable with these five common ones.

duration is how many seconds the whole animation takes. If you do not set it, it defaults to 0 seconds and no motion is visible, so always set it. timing-function determines the speed curve, such as starting slow and speeding up later. Besides keywords like ease and linear, you can build any curve with cubic-bezier(). To dial in that curve, the cubic-bezier Generator, which lets you adjust the curve visually, is a great help.

delay is the wait before playback starts, useful for "staggered" effects that move several elements at slightly different times. iteration-count is the number of plays; setting infinite creates an endless loop, used for loading spinners and the like. direction with alternate plays back and forth, producing a natural there-and-back motion.

You can also combine these into a single shorthand line, such as animation: fade-in 0.6s ease 0.2s 1 normal;. If the order confuses you, it is fine to start with the individual properties until you get used to it.

The Difference from transition

Besides animation, CSS offers transition for adding motion. They are similar, but their strengths are clearly different.

transition interpolates motion only "when one state changes to another." For example, if you set a color on a button with :hover, the color shifts smoothly only at the moment you hover. It is ideal for simple cases that connect two points, a start and an end.

animation, on the other hand, starts playing automatically just by being applied, with no triggering state change needed. You can specify intermediate steps finely with @keyframes, and it supports endless loops and back-and-forth playback, so it suits complex, automatic motion such as loading indicators or continuous movement that draws attention. A handy rule of thumb: use transition for simple hover flourishes, and animation for complex, automatic, or repeating motion.

Common Effects: Fade, Slide, Spin

Here are the classic effects that come up again and again in practice, along with the thinking behind them. All can be built by combining @keyframes and animation.

1. Fade (soft appearance)

Simply changing opacity from 0 to 1 makes an element appear softly. Going from 1 to 0 is a fade-out. It is the simplest and most frequently used effect, often used when a page loads.

2. Slide (gliding in)

Starting from a position shifted with transform: translateX() or translateY() and returning to the original position (0) makes the element glide in from the side or from above or below. Combining it with a fade so it "rises softly from below while appearing" gives a refined impression.

3. Spin (rotating)

Changing transform: rotate(0deg) to rotate(360deg) and combining iteration-count: infinite with timing-function: linear creates a loading spinner that keeps rotating at a constant speed. linear is used because rotation looks more natural at a constant speed.

You can write the @keyframes for these by hand, but the CSS Keyframes Generator, which generates code while you preview, lets you iterate on adjustments and checks quickly. When you want to perfect the speed curve, also fine-tune the timing-function with the cubic-bezier Generator to make the motion noticeably more polished.

Performance Tips

For animation, looking smooth is everything. Janky motion gives a cheap impression instead. The single most important factor for staying smooth is which property you animate.

• Prefer transform and opacity: do movement, scaling, and rotation with transform, and showing or hiding with opacity. Browsers can process these efficiently on the GPU, so they tend to move smoothly.
• Avoid continuously changing width, height, top, and left: changing size or position with these every frame triggers frequent layout recalculation (reflow), a common cause of jank. To move position, use transform: translate() rather than top/left.
• Do not animate too many elements at once: animating a large number of elements all at once overwhelms low-end devices. Limit the count, or stagger the timing.

Do not forget accessibility, either. For users sensitive to motion, it is considerate to provide @media (prefers-reduced-motion: reduce), which respects the OS "reduce motion" setting, and to keep animation restrained in that case.

CSS animation is easiest to handle when you think of it in two stages: build the blueprint of the motion with @keyframes, then specify how it plays with the animation property. Start by building and running a fade or slide in the CSS Keyframes Generator, and fine-tune the speed curve with the cubic-bezier Generator. Moving your hands and confirming with your eyes is the fastest path to improvement.

Please note that this article is intended to provide general information. CSS specifications and browser support can change, so when implementing, please also check the latest official documentation and each browser's support information before relying on it.