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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

1636閲覧

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

kyunta

総合スコア350

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

1クリップ

投稿2016/11/07 20:55

css

1<!DOCTYPE html> 2 3<html lang="ja"> 4<head> 5<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6<meta charset="utf-8" /> 7<meta name="description" content="" /> 8<meta name="author" content="" /> 9<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 10<title>xxx</title> 11 12<link rel="stylesheet" href="" /> 13<link rel="shortcut icon" href="" /> 14 15<style type="text/css"> 16body { 17 margin: 0px; /* reset css */ 18 padding: 0px; 19} 20 21#body-container{ 22 display:flex; 23 flex-direction:column; 24 width: 100%; 25 margin: 0px 16px; /* 上下0、左右16 */ 26 padding: 0px 0px; 27} 28 29ul li { /* reset css */ 30 margin: 0; 31 padding: 0; 32} 33 34nav#top-nav { 35 display:flex; 36 margin: 10px 10px; /* 他のコンテナとの間隔 */ 37 padding: 0px; 38 border-radius: 8px; 39} 40nav#top-nav ul { 41 display:flex; 42 flex-direction:row; 43 justify-content: flex-left; 44 margin: 0px; 45 padding: 0px; 46 list-style-type:none; 47} 48nav#top-nav li { 49 width: 80px; 50 margin: 10px 10px; 51 padding: 6px 16px; 52} 53 54.move1 { 55 display:flex; 56 width: 100%; 57 position: relative; 58 } 59 60li.hnav2 { 61 position:absolute; 62 top: 0px; 63 left:0px; 64} 65 66@keyframes nav-scale { 67 from { 68 transform: scaleX(1); 69 } 70 50% { 71 transform: scaleX(-1); 72 } 73 to { 74 transform: scaleX(1); 75 } 76} 77 78li.hnav:hover { 79 animation-name: nav-scale; 80 animation-duration: 3s; 81 animation-iteration-count: 1; 82 animation-fill-mode: forwards; 83 84} 85 86@keyframes move02 { 87 from { 88 transform: translateX( 0px); /* left:0px; */ 89 } 90 50% { 91 92 } 93 to { 94 transform: translateX( 116px); /* width80, margin10, padding16 */ 95 } 96} 97 98.hnav { 99 animation-duration: 5s; 100 animation-iteration-count: 1; 101 animation-fill-mode: forwards; 102} 103 104.hnav2 { 105 animation-name: move02; 106} 107 108.hnav { 109 width: 80px; 110 text-align: center; 111 border-radius: 8px; 112 border: solid 1px #888; 113} 114 115</style> 116 117</head> 118<body> 119<div id="body-container"> 120<nav id="top-nav"> 121 <ul class="move1" > 122 <li class="hnav hnav1"><a href="xxx.html">hnav1</a></li> 123 <li class="hnav hnav2"><a href="xxx.html">hnav2</a></li> 124 </ul> 125</nav> 126 127</div> <!-- body-container end --> 128</body> 129</html> 130

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4<head> 5<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6<meta charset="utf-8" /> 7<meta name="description" content="" /> 8<meta name="author" content="" /> 9<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 10<title>xxx</title> 11 12<link rel="stylesheet" href="" /> 13<link rel="shortcut icon" href="" /> 14 15<style type="text/css"> 16body { 17 margin: 0px; /* reset css */ 18 padding: 0px; 19} 20 21#body-container{ 22 display:flex; 23 flex-direction:column; 24 width: 100%; 25 margin: 0px 16px; /* 上下0、左右16 */ 26 padding: 0px 0px; 27} 28 29ul li { /* reset css */ 30 margin: 0; 31 padding: 0; 32} 33 34nav#top-nav { 35 display:flex; 36 margin: 10px 10px; /* 他のコンテナとの間隔 */ 37 padding: 0px; 38 border-radius: 8px; 39} 40nav#top-nav ul { 41 display:flex; 42 flex-direction:row; 43 justify-content: flex-left; 44 margin: 0px; 45 padding: 0px; 46 list-style-type:none; 47} 48nav#top-nav li { 49 width: 80px; 50 margin: 10px 10px; 51 padding: 6px 16px; 52} 53 54.move1 { 55 display:flex; 56 width: 100%; 57 position: relative; 58 } 59 60.hnav { 61 display: block; 62 width: 80px; 63 padding: 6px 16px; 64 text-align: center; 65 border-radius: 8px; 66 border: solid 1px #888; 67/* animation-duration: 5s; 68 animation-iteration-count: 1; 69 animation-fill-mode: forwards;*/ 70} 71.hnav:hover { 72 animation-name: nav-scale; 73 animation-duration: 3s; 74 animation-iteration-count: 1; 75 animation-fill-mode: forwards; 76} 77.hnav2 { 78 position:absolute; 79 top: 0; 80 left:0; 81 animation-name: move02; 82 animation-duration: 5s; 83 animation-iteration-count: 1; 84 animation-fill-mode: forwards; 85} 86@keyframes move02 { 87 from { 88 transform: translateX( 0px); /* left:0px; */ 89 } 90 50% { 91 92 } 93 to { 94 transform: translateX( 116px); /* width80, margin10, padding16 */ 95 } 96} 97 98@keyframes nav-scale { 99 from { 100 transform: scaleX(1); 101 } 102 50% { 103 transform: scaleX(-1); 104 } 105 to { 106 transform: scaleX(1); 107 } 108} 109</style> 110 111</head> 112<body> 113<div id="body-container"> 114<nav id="top-nav"> 115 <ul class="move1" > 116 <li class="hnav1"><a class="hnav" href="xxx.html">hnav1</a></li> 117 <li class="hnav2"><a class="hnav" href="xxx.html">hnav2</a></li> 118 </ul> 119</nav> 120</div> <!-- body-container end --> 121</body> 122</html>

投稿2016/11/08 08:16

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyunta

2016/11/08 09:12

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

2016/11/08 09:43

いえいえ~ それぞれのclassがどこについてるかを見てもらえばわかると思いますが、クルクルはa要素でウィーンはli要素のhnav2です。 詳細は調べてないので勘ですが、transformが衝突してリセットされて毎回読んでくるのかなーと。 同一要素に記述しなきゃダメなときはJSでウィーンしたあとウィーンするclassを削除って感じになると思います。 とりあえずは衝突さけたほうがいいですね。
kyunta

2016/11/08 10:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問