Vue Academy · Lesson

CSS Transitions and Animations

transition property in CSS, keyframe animations, using Animate.css with Vue Transition.

CSS Transitions and Animations is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two Ways to Animate in CSS

CSS gives you two tools that pair perfectly with Vue transitions: the transition property (interpolate between two states) and @keyframes with animation (multi-step timelines). Vue can drive either one.

The transition Shorthand

The transition shorthand combines property, duration, timing-function, and delay in one line. The order is: property, duration, easing, delay.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Transitioning Multiple Properties

Separate multiple transitions with commas. You can animate transform and opacity together for a slide-and-fade effect.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

When transition Is Not Enough

transition only animates between two states. For bouncing, pulsing, or multi-stage motion you need @keyframes, which lets you define many waypoints.

Defining Keyframes

@keyframes names a sequence of states using percentages (or from/to). Each stop describes the styles at that point in the timeline.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

The animation Property

Apply a keyframe set with the animation shorthand: name, duration, timing-function, delay, iteration-count, direction.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Hooking Keyframes into Transition

Put the animation on the enter-active class so it plays during insertion. For leaving, run the same keyframes in reverse.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Using Animate.css

Animate.css is a library of ready-made keyframe animations. Instead of writing your own classes you tell Vue to use Animate.css classes directly via the custom-class props.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class and leave-active-class

<Transition> accepts props to override the generated class names. enter-active-class and leave-active-class let you plug in any external class - perfect for Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Setting Duration Explicitly

When CSS timing is ambiguous (animation plus transition), set the duration prop so Vue knows exactly when to remove classes. It accepts a number or an object with enter/leave.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

Easing Functions Matter

The timing function shapes how motion feels. ease-out feels responsive for entering, ease-in for leaving, and cubic-bezier() gives full control.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Quick Check

Which prop lets you apply an Animate.css class during enter?

Recap

You compared the transition shorthand (two-state interpolation) with @keyframes plus animation (multi-step timelines), and learned to integrate Animate.css through the enter-active-class and leave-active-class props, using duration for precise timing.

Frequently asked questions

Is the “CSS Transitions and Animations” lesson free?

Yes — the full text of “CSS Transitions and Animations” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “CSS Transitions and Animations”?

transition property in CSS, keyframe animations, using Animate.css with Vue Transition. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “CSS Transitions and Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy