Presets

Transitions

s
s

Preview Element Properties

Save/Load

Preview

Hover over the element to see the transition

Hover me

CSS

.element {
  /* Default state */
  background-color: #3b82f6;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  /* Transition */
  transition: all 0.3s ease;
}

.element:hover {
  /* Hover state */
  background-color: #8b5cf6;
  width: 120px;
  height: 120px;
  border-radius: 50px;
  opacity: 0.8;
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

JavaScript

// Using Web Animations API
element.animate([
  {
    backgroundColor: '#3b82f6',
    transform: 'rotate(0deg) scale(1)',
    opacity: 1
  },
  {
    backgroundColor: '#8b5cf6',
    transform: 'rotate(45deg) scale(1.1)',
    opacity: 0.8
  }
], {
  duration: 300,
  easing: 'ease',
  fill: 'forwards'
});

// Using GSAP
gsap.to(element, {
  backgroundColor: '#8b5cf6',
  transform: 'rotate(45deg) scale(1.1)',
  opacity: 0.8,
  duration: 0.3,
  ease: 'power2.out'
});

Transition Tips

Performance

Prefer animating transform and opacity as they don't trigger layout recalculations.

Specificity

Use specific properties instead of all for better performance and predictability.

Timing

Keep transitions under 300ms for UI feedback. Longer durations work for emphasis effects.

Accessibility

Respect prefers-reduced-motion by reducing or removing transitions for sensitive users.