transition-propertyが効かない

前提・実現したいこと

aタグの要素に対してhover時にborderが下がりながら消えるアニメーションをつけようとしているんですが、transitionの値にborderを指定すると、その場から一瞬で消えるようになります。対象（property）を指定せず、値を「.3s」だけにするとアニメーション自体は想定通りの動きをしますが、ボーダー以外もアニメーションが適応されてしまいます。
borderだけにアニメーションを適応できないのはなぜでしょうか？

該当のソースコード

HTML
1<div class="top-image">
2        <figure>
3          <img src="../images/pickup1.jpg">
4          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
5          <div class="top-text">
6          <p><a href="#">READ MORE</a></p>
7        </div><!-- /top-text -->
8        </figure>
9        <figure>
10          <img src="../images/pickup2.jpg">
11          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
12          <div class="top-text">
13          <p><a href="#">READ MORE</a></p>
14        </div><!-- /top-text -->
15        </figure>
16        <figure>
17          <img src="../images/pickup3.jpg">
18          <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption>
19          <div class="top-text">
20          <p><a href="#">READ MORE</a></p>
21        </div><!-- /top-text -->
22        </figure>
23      </div><!-- /top-image -->

CSS
1@charset "utf-8";
2
3/* ====== 共通 ====== */
4html,body {
5  font-size: 16px;
6}
7
8body,div,p,h1,h2,h3,h4,h5,h6,ul,li,figure {
9  margin: 0;
10  padding: 0;
11}
12
13p,td,th,li {
14  line-height: 1.8;
15}
16
17a {
18  text-decoration: none;
19}
20
21li {
22  list-style: none;
23}
24
25.container {
26  max-width: 1000px;
27  margin: 0 auto;
28}
29
30
31/* ====== main ====== */
32.top-image {
33  display: flex;
34  justify-content: space-between;
35  padding: 150px 0 35px 0;
36}
37
38.top-image figure {
39  width: 31%;
40}
41
42.top-image figcaption {
43  font-weight: bold;
44  padding-top: 10px;
45  font-size: 14px;
46  line-height: 1.7;
47  letter-spacing: 1px;
48}
49
50.top-image img {
51  width: 100%;
52}
53
54.top-text {
55  text-align: center;
56  padding-top: 20px;
57}
58
59.top-text p {
60  display: inline-block;
61  font-size: 13px;
62  line-height: 1;
63}
64
65.top-text a {
66  position: relative;
67  border-bottom: 1px solid #333;
68  display: inline-block;
69  transition: border .3s;　/* 問題のプロパティ */
70  bottom: 2px;
71  color: black;
72}
73
74.top-text a:hover {
75  opacity: 0;
76  bottom: -4px;
77}

試したこと

transition-duration: .3s;
transition-property: border;
としても同じようにdurationの方を無視して一瞬で消えました。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

行動規範の内容に同意します

回答1件

ベストアンサー

opacityは全部が消えちゃうので
borderだけ消すのはどうでしょうか。

css
1.top-text a {
2  position: relative;
3  border-bottom: 1px solid #333;
4  display: inline-block;
5  transition: .3s;　/* 問題のプロパティ */
6  bottom: 2px;
7  color: black;
8}
9
10.top-text a:hover {
11  border-bottom: 1px solid #3330;
12/*   opacity: 0; */
13  bottom: -4px;
14}

2022-04-16追記

borderはpaddingの外側にあるので、borderを動かす為にpaddingを操作してます。
ただそのままだと、増えたpadding分、後続の要素に影響を与えてしまうので
borderの外側にあるmarginも操作してバランスをとっています。

css
1.top-text a {
2  color: black;
3  position: relative;
4  border-bottom: 1px solid #333;
5  display: inline-block;
6  transition: all .3s;
7  /* 問題のプロパティ */
8/*   bottom: 2px; */
9  padding-bottom:0;
10  margin-bottom:0.4em;
11}
12
13.top-text a:hover {
14  border-bottom: 1px solid #3330;
15/*   opacity: 0; */
16/*   bottom: -4px; */
17  padding-bottom:0.4em;
18  margin-bottom:0;
19}
20.text-content{
21  padding:2em;
22  text-align:center;
23  background:tomato;
24}

<div class="top-image">の後に兄弟要素として追加してください。チェック用の後続要素です。

html
1<div class="text-content">The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog</div>