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.

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