.message {
  position: relative;    /* バルーンを表示するための基準値とする */
  display: inline-block; /* インラインブロック要素にする */
}
.message span {
  opacity: 0;            /* 最初は透明にして見えなくする */
  position: absolute;    /* 表示を相対位置にする */
  top: 0px;              /* 上から0pxの位置でかつ */
  right: -5px;           /* 右から-5pxの位置に表示 */
  color: #fff;           /* 文字色を白に指定 */
  background: #000;  /* 背景色を半透明の黒にする */
  padding: 2px 5px;             /* 適度な余白を指定 */
}
.message_position1 {
  transform: translate(100%); /* 右に表示 */
}
.message_position2 {
  transform: translate(30%, 150%); /* 下に表示 */
}
.message button:focus + span {
  animation: fade-out 2s ease-in; /* inputが選択状態になったときにだけアニメーションを1回実行する */
}
.message a:focus + span {
  animation: fade-out 2s ease-in; /* inputが選択状態になったときにだけアニメーションを1回実行する */
}
@keyframes fade-out {  
  0% {visibility: visible; opacity: 1;}  /* 最初は表示して、 */
  100% {visibility: hidden; opacity: 0;} /* フェードアウトする */
}