<div class="popover"></div>
body{
  background: #ccc;
}
.popover {
  margin: 0 auto;
  width: 300px;
  height: 100px;
  box-shadow: 0 0 5px #333;
  background: #eee;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s, transform 0.5s;
}

/* 定義初始樣式 */
@starting-style {
  .popover {
    opacity: 0;
    transform: scale(0.9);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.