Transitions & animations > Animation

Animating popover

One of the most frequently asked questions about popover must be: how can I animate it? It's a little involved but we can use CSS for it!

The bits that matter:

• we transition between opacity 0 and 1, and also between transform translateY(1rem) and translateY(0)
• we use a starting-style to set the initial state
• we add a transition on four properties: opacity, transform, display and overlay
• as display and overlay have discrete values that normally can't be transitioned, we need to set them to allow-discrete

							<button popovertarget="toast">Show toast</button>

<div id="toast" popover>
I am a toast message
</div>

<style>
body { 
  background: papayawhip;
	height: 10em;
}

[popover] {
	inset: auto auto 1rem;
	margin: 0;
	transform: translateY(1rem);
	opacity: 0;
	transition:
		opacity 250ms ease,
		transform 250ms ease,
		display 250ms allow-discrete,
		overlay 250ms allow-discrete;
}

[popover]:popover-open {
	transform: translateY(0);
	opacity: 1;
}

@starting-style {
	[popover]:popover-open {
		transform: translateY(1rem);
		opacity: 0;
	}
}
</style>
						

Browser support