Enter/Leave Animations

The CSS :enter and :leave pseudo selectors can be used with the transition property to animate the insertion and removal of elements.

When an element is inserted into the DOM, the :enter pseudo-class is applied to it. When an element is removed from the DOM, the :leave pseudo-class is applied to it. The duration these classes are applied can be controlled with the state-duration property.

@starting-style

A @starting-style block is the standard spelling of the same idea for insertions: its declarations are the style an element has on the frame it appears, and a transition runs from them to the element’s own style. It works at the top level and nested inside a rule.

.item {
  opacity: 1;
  transition: opacity 0.5s;

  @starting-style {
    opacity: 0;
  }
}

@starting-style {
  .other {
    translate: -100px 0;
  }
}

Each rule inside the block is applied through :enter, so .item { @starting-style { ... } } is .item:enter { ... }. That adds a pseudo-class to the rule’s specificity, where on the web the block adds nothing, and state-duration extends how long it applies, as it does for :enter.

:root {
  gap: 10px;
}

.item {
  flex-direction: row;
  align-items: center;
  transition: all 0.5s;

  state-duration: 0.5s;
}

.item:enter {
  state-duration: 0s;
  translate: -100px 0;
  opacity: 0;
}

.item:leave {
  translate: 100px 0;
  opacity: 0;
}