CSSでテキストにホバーマーカーアニメーションを付けたい。

Question

下記のコードで、マウスホバー時に水色のマーカーから、黄色のマーカーに変わり、更に少し上に持ち上げるというアニメーション効果を付けたかったのですが、アニメーション（transition)が適用されません。

/* マーカースタイル　アクア */
.marker-aqua {
	background: linear-gradient(transparent 60%, aqua 50%);
	transition:all 2s;
}

.marker-aqua:hover {
	background: linear-gradient(transparent 60%, yellow 50%);
	position:relative;
	bottom:4px;
}

HTMLのフォーマットはこちらになります。

<strong class="marker-aqua">ここにテキスト</strong>

使っているOSはWindows 10、ブラウザーはfirefox ver 65.02、WordPress 5.1を使っています。

参考URL：https://www.infoaxel.com/2018/09/22/post-319/

よろしくお願いします。

Comments

[m.ts10806]

これだけだと再現確認できませんのでhtmlもあわせてご提示ください。

[Python.R]

HTMLとしては、「<strong class="marker-aqua">ここにテキスト<strong>」になります。

[m.ts10806]

質問は編集できますし、こちらに回答のための重要情報を提示されても、こちらはデフォルト非表示で要件との関連性もあまり高くないので、原則質問本文にご提示ください

[dice142]

動作環境も合わせて書いていただけると助かります。（OS、ブラウザ等）

[dice142]

あとHTML間違ってませんか？
「テキスト<strong>」→「テキスト</strong>」

[Python.R]

すみません、修正しました。

Answer 1

2点問題があります。

まず、background-imageはtransition等でアニメーションできません。
（background: linear-gradient...はbackground-imageに当たります）

ですが、方法がないわけではないので、以下の記事を参考にしてみると良いかと思います。
https://www.tsukimi.net/css_gradient_hover_animation.html

次に、hover時にbottomに値を設定していますが、
通常時にもbottomを指定しておかないとアニメーション出来ないことがあります。

.marker-aquaにもbottom値の指定をしましょう。

Comments

[Python.R]

皆様ありがとうございまsた。

bottomの方はアニメーションできるようになりました。

しかし、マーカーの方が苦戦中なので、また質問するかもしれません。

Answer 2

transition に background-image は使えませんが、単色のようなので疑似要素で

.marker-aqua {
    position: relative;
    bottom: 0;
    transition: all 2s;
}

.marker-aqua:hover {
    bottom: 4px;
}

.marker-aqua::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 40%;
    width: 100%;
    z-index: -1;
    background: aqua;
    transition: inherit;
}

.marker-aqua:hover::before {
    background: yellow;
}