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;が呼ばれるようにするにはどのようにするといいのでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/08 09:12
2016/11/08 09:43
2016/11/08 10:12