質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

:hoverで指定したanimation-nameとは別のnameのものが呼ばれてしまう

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 999

kyunta

score 340

<!DOCTYPE html>

<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>xxx</title>

<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" />

<style type="text/css">
body {
    margin: 0px;        /* reset css */
    padding: 0px;
}

#body-container{
    display:flex;
    flex-direction:column;
    width: 100%;
    margin: 0px 16px;    /* 上下0、左右16 */
    padding: 0px 0px;
}

ul li {    /* reset css */
    margin: 0;
    padding: 0;
}

nav#top-nav {
    display:flex;
    margin: 10px 10px;    /* 他のコンテナとの間隔 */
    padding: 0px;
    border-radius: 8px;
}
nav#top-nav ul {
    display:flex;
    flex-direction:row;
    justify-content: flex-left;
    margin: 0px;
    padding: 0px;
    list-style-type:none;
}
nav#top-nav li {
    width: 80px;
    margin: 10px 10px;
    padding: 6px 16px;
}

.move1 {
    display:flex;
    width: 100%;
    position: relative;
    }

li.hnav2 {
    position:absolute;
    top: 0px;
    left:0px;
}

@keyframes nav-scale {
    from {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    to {
        transform: scaleX(1);
    }
}

li.hnav:hover {
    animation-name: nav-scale;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}

@keyframes move02 {
    from {
        transform: translateX( 0px); /* left:0px; */
    }
    50% {

    }
    to {
        transform: translateX( 116px);    /* width80, margin10, padding16 */
    }
}

.hnav {
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.hnav2 {
    animation-name: move02;
}

.hnav {
    width: 80px;
    text-align: center;
    border-radius: 8px;
    border: solid 1px #888;
}

</style>

</head>
<body>
<div id="body-container">
<nav id="top-nav"> 
    <ul class="move1" >
        <li class="hnav hnav1"><a href="xxx.html">hnav1</a></li>
        <li class="hnav hnav2"><a href="xxx.html">hnav2</a></li>
    </ul>
</nav>

</div> <!-- body-container end -->
</body>
</html>


.hnav2のanimation-name: move02;はページを最初に表示した時やリロードなどにanimation-name: move02;が走ります。
その後、hover時にanimationをさせていないhnav1はanimation-name: nav-scale;が呼ばれますが、hnav2はanimation-name: move02;が呼ばれてしまいます。
これをhnav2もhoverで指定したanimation-name: nav-scale;が呼ばれるようにするにはどのようにするといいのでしょうか。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

こんな感じに動きを分けるほうがいいと思います。

<!DOCTYPE html>

<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>xxx</title>

<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" />

<style type="text/css">
body {
    margin: 0px;        /* reset css */
    padding: 0px;
}

#body-container{
    display:flex;
    flex-direction:column;
    width: 100%;
    margin: 0px 16px;    /* 上下0、左右16 */
    padding: 0px 0px;
}

ul li {    /* reset css */
    margin: 0;
    padding: 0;
}

nav#top-nav {
    display:flex;
    margin: 10px 10px;    /* 他のコンテナとの間隔 */
    padding: 0px;
    border-radius: 8px;
}
nav#top-nav ul {
    display:flex;
    flex-direction:row;
    justify-content: flex-left;
    margin: 0px;
    padding: 0px;
    list-style-type:none;
}
nav#top-nav li {
    width: 80px;
    margin: 10px 10px;
    padding: 6px 16px;
}

.move1 {
    display:flex;
    width: 100%;
    position: relative;
    }

.hnav {
    display: block;
    width: 80px;
    padding: 6px 16px;
    text-align: center;
    border-radius: 8px;
    border: solid 1px #888;
/*    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}
.hnav:hover {
    animation-name: nav-scale;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.hnav2 {
    position:absolute;
    top: 0;
    left:0;
    animation-name: move02;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes move02 {
    from {
        transform: translateX( 0px); /* left:0px; */
    }
    50% {

    }
    to {
        transform: translateX( 116px);    /* width80, margin10, padding16 */
    }
}

@keyframes nav-scale {
    from {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    to {
        transform: scaleX(1);
    }
}
</style>

</head>
<body>
<div id="body-container">
<nav id="top-nav"> 
    <ul class="move1" >
        <li class="hnav1"><a class="hnav" href="xxx.html">hnav1</a></li>
        <li class="hnav2"><a class="hnav" href="xxx.html">hnav2</a></li>
    </ul>
</nav>
</div> <!-- body-container end -->
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/08 18:12

    ginさん、ありがとうございます。
    回答が付かなかったのでご迷惑かとも思ったのですがご依頼させていただきました。
    class指定せずにhoverをまとめて指定することで回避できるとはわかりませんでした。
    質問後、animation-fill-mode:noneなどでnav-scaleを走らせることまではできたのですが、
    ホバーアウトするとmove02が走ってしまう状態でした。
    hoverをまとめ、move02をクラス指定することで回避できる理由はわかりませんが、
    少しずつ知識をつけていく中で理解できる日が来ると思っています。
    お手数をお掛けいたしました。
    本当にありがとうございました。

    キャンセル

  • 2016/11/08 18:43

    いえいえ~

    それぞれのclassがどこについてるかを見てもらえばわかると思いますが、クルクルはa要素でウィーンはli要素のhnav2です。
    詳細は調べてないので勘ですが、transformが衝突してリセットされて毎回読んでくるのかなーと。

    同一要素に記述しなきゃダメなときはJSでウィーンしたあとウィーンするclassを削除って感じになると思います。
    とりあえずは衝突さけたほうがいいですね。

    キャンセル

  • 2016/11/08 19:12

    ginさん、ありがとうございます。
    JSを自在に使えるようになると出来ることが一気に広がるんでしょうけど、今はhtmlとcssでいっぱいいっぱいの状況です><
    まだまだ変なところでつまずいてしまうと思いますのでよろしくお願いいたします。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる