Hubspot-Style Guide to CSS Animation-Direction

Designers who love the clean, polished feel of Hubspot interfaces often want the same level of control over CSS animations on their own sites. The animation-direction property is a core piece of that control, letting you decide how an animation proceeds through its keyframes on each cycle.

This how-to walks you through every value of animation-direction, shows working code examples, and explains how to combine it with other timing properties so your animations feel as smooth and intentional as a Hubspot product experience.

What CSS Animation-Direction Does in a Hubspot-Like UI

The animation-direction property tells the browser whether to play an animation forward, backward, or alternate between both. In a product surface similar to Hubspot, you might use it for:

Hover effects that move out and then snap back smoothly
Attention-grabbing banners that pulse in both directions
Microinteractions on buttons, inputs, or icons
Slide-in panels that can reverse direction when closing

The syntax is simple, but it interacts with other animation properties like animation-iteration-count, animation-duration, and animation-timing-function. Getting those combinations right is what makes animations feel professional instead of distracting.

Core Syntax for Animation-Direction in a Hubspot Layout

At its simplest, you can define animation-direction as a longhand property:

selector {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

Or you can place the direction inside the shorthand declaration, similar to how you might compress CSS in a Hubspot-style design system:

selector {
  animation: slide 2s infinite linear alternate;
}

Next, you will see exactly how each direction value behaves and when to use it.

Hubspot-Friendly Examples of Animation-Direction Values

Hubspot Animation: Normal Direction

normal is the default. The animation runs from the first keyframe to the last on every cycle. Use it for straightforward transitions such as subtle hover reveals or simple state changes.

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.card {
  animation-name: fade-in-right;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
}

In an app that aims to mirror Hubspot polish, this direction is ideal for single-entry animations, like cards entering a dashboard.

Hubspot Animation: Reverse Direction

reverse plays the keyframes from last to first. The defined keyframes stay the same, but the playback order flips.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.sidebar-close {
  animation: slide-in 0.4s ease-out 1 reverse;
}

This pattern is useful when you want a Hubspot-style sidebar to slide in using one animation and slide out using the same keyframes in reverse, keeping code DRY and predictable.

Hubspot Animation: Alternate Direction

alternate plays one cycle forward, then the next cycle backward, repeating that pattern. The first run starts at the first keyframe.

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.cta-button {
  animation: pulse 1.2s ease-in-out infinite alternate;
}

For a call-to-action button inspired by Hubspot’s calm microinteractions, alternate creates a soft pulsing effect without harsh snapping between cycles.

Hubspot Animation: Alternate-Reverse Direction

alternate-reverse also alternates, but starts in reverse on the first cycle. That means the initial run begins at the last keyframe.

@keyframes slide-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

.icon-bounce {
  animation: slide-y 0.8s ease-in-out infinite alternate-reverse;
}

Use this when the resting state of your element should align with the animation’s final keyframe yet still benefit from a Hubspot-like alternating motion.

Combining Animation-Direction with Other CSS Properties

To reach product-quality motion similar to Hubspot, consider how animation-direction interacts with these related properties:

animation-iteration-count — how many times the animation repeats
animation-duration — how long each cycle takes
animation-delay — when the animation should begin
animation-timing-function — easing curve like ease, linear, or custom cubic-bezier
animation-fill-mode — whether the element keeps styles from first or last keyframe outside the active phase

An example of a compact yet readable shorthand that would fit nicely into a Hubspot-inspired design system:

.toast-notification {
  animation: slide-in-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1)
             0s 1 normal both;
}

Here, the element slides in once, in the normal direction, and retains the final keyframe styles thanks to both in animation-fill-mode.

Practical Hubspot-Like Use Cases

Looping Status Indicators with Hubspot Motion

For loading indicators or syncing states, a small, looping effect that alternates direction can feel dynamic without being overwhelming.

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.status-spinner {
  animation: rotate-slow 1.5s linear infinite normal;
}

If you instead want the rotation to feel more playful, you could use alternate or alternate-reverse with a smaller angle in the keyframes.

Hubspot Card Hover Effects with Alternate Direction

Hovering cards can gently move up and down while the pointer is over them, mirroring the friendly motion used in many product dashboards.

@keyframes lift {
  from {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }
  to {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }
}

.card:hover {
  animation: lift 0.5s ease-in-out infinite alternate;
}

This approach gives your interface a refined, Hubspot-like sense of depth and responsiveness.

Debugging Animation-Direction in a Hubspot-Inspired Project

When your animation does not behave as expected, check these common issues:

Verify that @keyframes name matches the animation-name in your CSS.
Ensure no extra whitespace or typos in the shorthand declaration.
Confirm that animation-iteration-count is set to a value that allows you to see the alternate or reverse effect (for example, 2 or infinite).
Check animation-fill-mode if the element appears to “jump” back to its initial state after the animation finishes.

Using browser dev tools, you can pause, slow down, or replay animations to match the smooth interactions often seen in Hubspot interfaces.

Further Learning and Optimization Beyond Hubspot

To explore the original reference for animation-direction, review the detailed explanation on the HubSpot blog at this CSS animation-direction article. It expands on values, timing, and additional code patterns that you can adapt to your own design system.

If you are building complex marketing or SaaS experiences that should feel as polished as Hubspot, you may also want strategic guidance on technical SEO, performance, and UX. For tailored consulting on optimization and implementation, you can visit Consultevo and explore their services.

By mastering animation-direction and combining it thoughtfully with other animation properties, you can produce interfaces that feel just as intentional, consistent, and user-friendly as modern platforms like Hubspot.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Hupspot guide to CSS animation