【cssアニメーション】マウスをかざすと吹き出しが飛び出すアニメーションを紹介

こんにちは、りょうです！

あるものを作る途中に飛び出す吹き出しが欲しいなと思ったので、自分なりにまとめてみました！

この記事の目次

作成したアニメーション
ソースコード

作成したアニメーション

直感的に吹き出しが飛び出したのがわかりやすい動きをつけています！

ソースコード

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
<div id="circle">
  <div id="SpeechBubble">hello world</div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script  src="./script.js"></script>

</body>
</html>

body {
  background-color: white;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

#circle {
  margin: 200px auto;
  background-color: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

#SpeechBubble {
  position: absolute;
  transform-origin: 0% 100%;
  text-align: center;
  background-color: #5a5a5a;
  color: white;
  border-radius: 10px;
  width: 120px;
  padding: 10px;
  left: 110px;
  top: -75px;
  transform: scale(0);
  animation-fill-mode: forwards;
}

#SpeechBubble::before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  bottom: -25px;
  left: 5px;
  border-style: solid;
  border-width: 15px;
  border-color: #5a5a5a transparent transparent #5a5a5a;
  transform: rotate(10deg);
}

@keyframes expand-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

var circle = $("#circle");
var speechBubble = $("#SpeechBubble");

circle.hover(
  function() {
    speechBubble.css({
      "animation-name": "expand-bounce",
      "animation-duration": "0.25s"
    });
  },
  function() {
    speechBubble.css({
      "animation-name": "shrink",
      "animation-duration": "0.1s"
    });
  }
);

今回のソースコードでは、アニメーションの定義をcssファイルで行い、それらの制御をjQueryで行っています。

なおSpeechBubbleでは吹き出しの本体を、SpeechBubble::beforeでは吹き出しの下の部分（ピロっとなってるところ）を定義しています。