# Utilities: view-transition Source: `src/utilities/view-transition.css` | Class | CSS output | | --- | --- | | `.velin-morph-avatar` | `view-transition-name: morph-avatar;` | | `.velin-morph-badge` | `view-transition-name: morph-badge;` | | `.velin-morph-card` | `view-transition-name: morph-card;` | | `.velin-morph-image` | `view-transition-name: morph-image;` | | `.velin-morph-list-item` | `view-transition-name: var(--velin-morph-item-id);` | | `.velin-morph-source` | `view-transition-name: var(--velin-morph-id, morph);` | | `.velin-morph-target` | `view-transition-name: var(--velin-morph-id, morph);` | | `.velin-vt-card` | `view-transition-name: card;` | | `.velin-vt-content` | `view-transition-name: content;` | | `.velin-vt-header` | `view-transition-name: header;` | | `.velin-vt-hero` | `view-transition-name: hero;` | | `.velin-vt-image` | `view-transition-name: image;` | | `.velin-vt-morph` | `view-transition-name: var(--velin-vt-name, morph);` | | `.velin-vt-nav` | `view-transition-name: nav;` | | `.velin-vt-sidebar` | `view-transition-name: sidebar;` | | `.velin-vt-title` | `view-transition-name: title;` |