0Pricing
Vue Academy · Lesson

CSS Transitions and Animations

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

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;
}

All lessons in this course

  1. The Transition Component
  2. CSS Transitions and Animations
  3. JavaScript Transition Hooks
  4. TransitionGroup for List Animations
← Back to Vue Academy