input[type="range"]のthumbのhoverでアニメーションをつけたい

input[type="range"]のthumbで値を変えると、画像の大きさが変わるようにしているのですが、thumbをhoverしたときに、アニメーションで、数値がポップアップするようにしたいのですが、アニメーションが出てきません。

エラーは起きてないです。

こちらのサイトの真似をしています。

https://naruhodo.repop.jp/css-balloon-popup/

よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/styles.css">
6  <title>練習実験</title>
7</head>
8<body>
9  <div id="container">
10    <div class="block"><img src="cheese.jpg" width="100px"><br />
11    <input type="range"
12           id="slider"
13           value="100"
14           min="0"
15           max="300"
16           data-number="0"
17           >
18    <div id="story">100</div>
19  </div>
20
21
22
23
24  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
25  <script>
26    $(window).on('load', function() {
27      $("input[type='range']").on('input', function() {
28        var val = $(this).val();
29        var slider = $(this);
30        $(this).attr("data-number", val);
31        $('#story').text(parseInt(slider.attr("data-number")));
32        $('img').width(parseInt(slider.attr("data-number")));
33
34      });
35    });
36  </script>
37</body>
38</html>
39

css
1body {
2  font-family: 'Yu Gothic';
3  font-size: 16px;
4}
5
6#container {
7  margin: 50px auto;
8  width: 500px;
9}
10
11#slider {
12  position: relative;
13}
14
15#story {
16  position: absolute;
17  background: linear-gradient(red, white);
18  height: 40px;
19  width: 40px;
20  line-height: 40px;
21  border-radius: 50%;
22  top:160px;
23  left: 500px;
24  text-align: center;
25  font-weight: bold;
26  opacity: 0;
27}
28
29input[type="range"] {
30  -webkit-appearance: none;
31  appearance: none;
32  background-color: #c7c7c7;
33  height: 2px;
34  width: 500px;
35
36  &:focus,
37  &:active {
38    outline: none;
39  }
40}
41
42input[type="range"]::-webkit-slider-thumb {
43    -webkit-appearance: none;
44    appearance: none;
45    cursor: pointer;
46    position: relative;
47    border: none;
48    width: 12px;
49    height: 12px;
50    display: block;
51    background-color: #262626;
52    border-radius: 50%;
53    -webkit-border-radius: 50%;
54  }
55
56
57  input[type="range"]::-webkit-slider-thumb:hover #story {
58    animation: popup 1s forwards;
59  }
60
61  @keyframes popup {
62    0% {
63      opacity: 0;
64      top: 150px;
65    }
66    1% {
67      opacity: 0;
68      top: 15px;
69    }
70    100% {
71      opacity: 1;
72      top: 160px;
73    }
74  }
75