cssで、ホバーした時に要素をtranslateさせたい

実現したいこと

要素にホバーした時、背景色を変えるとともに、translateさせたい。

前提

以下のコードで、hoverの中で書いている背景色とtansformのうち、背景色しか変わりません。

発生している問題・エラーメッセージ

エラーは発生していないどころか、開発者ツールには、hoverの時に「transform: translateX(50px);」と表示までされています。なのに、translateは全く動きません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link rel="stylesheet" href="style.css" />
7    <title>Document</title>
8  </head>
9  <body>
10    <div class="container">
11      <div class="top inners">トップ要素</div>
12      <div class="middle inners">ミドル要素</div>
13      <div class="bottom inners">ボトム要素</div>
14    </div>
15  </body>
16</html>
17

scss
1.container {
2  width: 200px;
3  height: 200px;
4  background-color: #ddd;
5  display: flex;
6  flex-direction: column;
7  justify-content: center;
8  align-items: center;
9  gap: 20px;
10
11  .inners {
12    width: 80%;
13    height: 30px;
14    color: white;
15    display: flex;
16    justify-content: center;
17    align-items: center;
18    border: solid 1px #241717;
19    border-radius: 5px;
20    opacity: 0;
21    cursor: pointer;
22    // transition: 0.3s;
23
24    // ここです！！！
25    &:hover {
26      transform: translateX(50px);
27      background-color: #241717;
28    }
29  }
30
31  .top {
32    background-color: blue;
33    animation-name: kf;
34    animation-duration: 0.5s;
35    animation-delay: 0;
36    animation-iteration-count: 1;
37    animation-fill-mode: forwards;
38  }
39
40  .middle {
41    @extend .top;
42    animation-delay: 0.2s;
43    background-color: green;
44  }
45
46  .bottom {
47    @extend .top;
48    animation-delay: 0.4s;
49    background-color: red;
50  }
51}
52
53@keyframes kf {
54  0% {
55    transform: translateY(100px);
56    opacity: 0;
57  }
58  100% {
59    transform: translateY(0);
60    opacity: 1;
61  }
62}
63

試したこと

JavaScriptで、addEventListenerを使ってstyleごと書き換えたりしましたが、それでも動きません。なぜですか？
どなたか詳しい方がいらっしゃいましたら、お力を貸してくださいm(__)m

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

ここにより詳細な情報を記載してください。

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

回答1件

.top .middle .bottom に設定されたアニメーションで付加されたtransformが適用されているのでしょう。

下記のように!importantを付けて詳細度をあげれはどうでしょう。

scss
1    // ここです！！！
2    &:hover {
3      transform: translateX(50px) !important;
4      background-color: #241717;
5    }

修正案

!importantは副作用が大きいのでやめて、animation-fill-mode の forwards を backwards に変更するのがいいでしょう。

scss
1  .inners {
2    width: 80%;
3    height: 30px;
4    color: white;
5    display: flex;
6    justify-content: center;
7    align-items: center;
8    border: solid 1px #241717;
9    border-radius: 5px;
10    //opacity: 0; 削除
11    cursor: pointer;
12    transition: 0.3s;
13
14    // ここです！！！
15    &:hover {
16      transform: translateX(50px);
17      background-color: #241717;
18    }
19  }
20
21//中略
22
23  .top {
24    background-color: blue;
25    animation-name: kf;
26    animation-duration: 0.5s;
27    animation-delay: 0;
28    animation-iteration-count: 1;
29    animation-fill-mode: backwards; //修正
30  }

投稿2023/09/28 21:44

編集2023/10/04 01:36

hatena19

総合スコア34360

Okt

2023/09/29 00:10

transformも適応されました！！ありがとうございます。質問ですが、 ① キーフレームのtransformと競合してそれに負けていたため、hoverのtransformが効かなかったのでしょうか？ ② transition0.3を指定したところ、hover時の transform: translateX(50px) !important; が強すぎてtransitionが効かなくなってしまいました。背景色は0.3sで遷移するに対し、transformが一瞬で変わってしまいます。この解決策はありますでしょうか？

hatena19

2023/10/04 01:32

コメントがあるのに気づかずに遅くなりました。 ① について animation-fill-mode: forwards; が設定されているので、アニメーション後も@keyframes の100%の設定が適用されているのでしょう。 ②について !important は副作用が大きいので、 animation-fill-mode の forwards を backwards に変更すればいいでしょう。回答の方にも修正案を追記しておきます。

Okt

2023/10/04 08:36

ありがとうございます！！！！

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