<div class="toast" id="toast" popover="manual">
  Hello I am a toast notification
</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ducimus, voluptatem fugit corporis voluptate eos inventore laborum quaerat autem veritatis, ad odio totam vero. Sint, consequatur? Distinctio sit necessitatibus numquam mollitia quas sed labore sapiente dolorem dolor nemo explicabo, minima velit ea eligendi similique eaque, voluptatibus, beatae omnis laudantium exercitationem ducimus! Natus, exercitationem fuga quaerat dicta aliquam ullam. Illum, illo doloribus. Atque tempore fuga culpa expedita asperiores non amet ducimus eaque voluptatem, corporis necessitatibus delectus a ut molestiae omnis veniam suscipit aliquid facilis. Totam, excepturi maiores. Reprehenderit, dolore molestiae? Autem quisquam quae asperiores! Adipisci totam dolorum in harum sit quos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ducimus, voluptatem fugit corporis voluptate eos inventore laborum quaerat autem veritatis, ad odio totam vero. Sint, consequatur? Distinctio sit necessitatibus numquam mollitia quas sed labore sapiente dolorem dolor nemo explicabo, minima velit ea eligendi similique eaque, voluptatibus, beatae omnis laudantium exercitationem ducimus! Natus, exercitationem fuga quaerat dicta aliquam ullam. Illum, illo doloribus. Atque tempore fuga culpa expedita asperiores non amet ducimus eaque voluptatem, corporis necessitatibus delectus a ut molestiae omnis veniam suscipit aliquid facilis. Totam, excepturi maiores. Reprehenderit, dolore molestiae? Autem quisquam quae asperiores! Adipisci totam dolorum in harum sit quos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ducimus, voluptatem fugit corporis voluptate eos inventore laborum quaerat autem veritatis, ad odio totam vero. Sint, consequatur? Distinctio sit necessitatibus numquam mollitia quas sed labore sapiente dolorem dolor nemo explicabo, minima velit ea eligendi similique eaque, voluptatibus, beatae omnis laudantium exercitationem ducimus! Natus, exercitationem fuga quaerat dicta aliquam ullam. Illum, illo doloribus. Atque tempore fuga culpa expedita asperiores non amet ducimus eaque voluptatem, corporis necessitatibus delectus a ut molestiae omnis veniam suscipit aliquid facilis. Totam, excepturi maiores. Reprehenderit, dolore molestiae? Autem quisquam quae asperiores! Adipisci totam dolorum in harum sit quos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ducimus, voluptatem fugit corporis voluptate eos inventore laborum quaerat autem veritatis, ad odio totam vero. Sint, consequatur? Distinctio sit necessitatibus numquam mollitia quas sed labore sapiente dolorem dolor nemo explicabo, minima velit ea eligendi similique eaque, voluptatibus, beatae omnis laudantium exercitationem ducimus! Natus, exercitationem fuga quaerat dicta aliquam ullam. Illum, illo doloribus. Atque tempore fuga culpa expedita asperiores non amet ducimus eaque voluptatem, corporis necessitatibus delectus a ut molestiae omnis veniam suscipit aliquid facilis. Totam, excepturi maiores. Reprehenderit, dolore molestiae? Autem quisquam quae asperiores! Adipisci totam dolorum in harum sit quos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ducimus, voluptatem fugit corporis voluptate eos inventore laborum quaerat autem veritatis, ad odio totam vero. Sint, consequatur? Distinctio sit necessitatibus numquam mollitia quas sed labore sapiente dolorem dolor nemo explicabo, minima velit ea eligendi similique eaque, voluptatibus, beatae omnis laudantium exercitationem ducimus! Natus, exercitationem fuga quaerat dicta aliquam ullam. Illum, illo doloribus. Atque tempore fuga culpa expedita asperiores non amet ducimus eaque voluptatem, corporis necessitatibus delectus a ut molestiae omnis veniam suscipit aliquid facilis. Totam, excepturi maiores. Reprehenderit, dolore molestiae? Autem quisquam quae asperiores! Adipisci totam dolorum in harum sit quos!</p>
:root {
      --spring-easing: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
  );
}

.toast:not(:popover-open) {
  opacity: 0;
  filter: blur(6px);
  scale: .8;
}

.toast {
  bottom: 16px;
  left: 24px;
  right: auto;
  top: auto;
  padding: 12px 16px;
  border: 0;
  background-color: #181818;
  color: white;
  border-radius: 8px;
  transition: translate .4s var(--spring-easing), opacity .3s, filter .3s, scale .3s, display .4s allow-discrete, overlay .4s allow-discrete;
  box-shadow: rgba(0,0,0,.2) 0px 2px 4px;
}

 @starting-style {
   .toast {
     translate: 0 30px;
   }
  }

body {
  font-family: system-ui;
  padding: 24px;
}

const toast = document.getElementById('toast');

setTimeout(function() {
  toast.showPopover()
}, 4000);

toast.addEventListener('toggle', function(event) {
  const target = event.currentTarget;
if (event.currentTarget.matches(':popover-open') ) {
  setTimeout(function() {
    target.hidePopover(); 
  }, 5000)
} 
   else {return}
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.