body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-size: 5vw;
}
.chat-bubble {
  --triangle-size: .5em;
  
  background: gold;
  padding: 1em;
  border-radius: 3em;
  position: relative;
  
  animation: hello-enlarge 3s ease infinite;
  
  transform-origin: 50% calc(100% + var(--triangle-size));
  
  box-shadow: 0 .1em goldenrod;
}
.chat-bubble::after {
  
  content: '';  
  border: var(--triangle-size) solid transparent;
  border-top-color: gold;
  position: absolute;
  bottom: calc(var(--triangle-size) * -2 + 2px) ;
  left: calc(50% - var(--triangle-size));  
}
.chat-bubble::before {
  --triangle-size: .5em;
  content: '';  
  border: var(--triangle-size) solid transparent;
  border-top-color: goldenrod;
  position: absolute;
  bottom: calc(var(--triangle-size) * -2 - .1em + 2px);
  left: calc(50% - var(--triangle-size));  
}

@keyframes hello-enlarge {
  0% {transform: scale3d(0.1,0.1,1) rotate3d(0,0,0,0); opacity: 0}
  25% {transform: scale3d(1,1,1) rotate3d(0,0,0,0); opacity: 1}
  30% {transform: scale3d(3,3,1) rotate3d(0,0,1,-10deg)}
  35% {transform: scale3d(3,3,1) rotate3d(0,0,1, -5deg)}
  40% {transform: scale3d(3,3,1) rotate3d(0,0,1, -10deg)}
  45% {transform: scale3d(3,3,1) rotate3d(0,0,1, -5deg)}
  50% {transform: scale3d(3,3,1) rotate3d(0,0,1,-10deg)}
  70% {transform: scale3d(1,1,1) rotate3d(0,0,0,0); opacity: 1;}
  80% {transform: scale3d(1,1,1) rotate3d(0,0,0,0) translate3d(0,10em,0); opacity: 0}
  100% {transform: scale3d(1,1,1) rotate3d(0,0,0,0) translate3d(0,10em,0); opacity: 0}
}