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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

10127閲覧

animationをスマホ版で無効にしたい

-1an.vvks-

総合スコア71

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/09 01:39

編集2016/12/09 03:37

###[√] animationをスマホ版で無効にしたい

PC表示でanimationをかけてhoverでスピンするようにしました。

css

1@keyframes myspin { 2 0%{transform:rotate(0deg);} 3 100%{transform:rotate(360deg);} 4 }

スマホ表示のときは無効にできるように
@media screen内に、

css

1@keyframes myspin{ 2 0%{transform:rotate(0deg);} 3 100%{transform:rotate(0deg);} 4 }

としてみましたが、回転します。

animation:none;も効きませんでした。

###詳細
ヘッダの左端の丸(<a id="siteLogo" href="../index.html"></a>)にアイコン画像が入ります。

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title id="title">おすすめ映画 BEST 10 | ENJOY CINEMAS!</title> 10 <link rel="stylesheet" href="rank.css"> 11 </head> 12 13 <body> 14 15 <header> 16 <input id="menuButtonInput" type="checkbox"></input> 17 <label id="menuButton" for="menuButtonInput"></label> 18 <ul id="menuItemContainer"> 19 <li><a href="../aboutMe.html">About</a></li> 20 <li><a href="../index.html#topViewArticleContainer">Article</a></li> 21 <li><a href="../copyRight.html">Copyright</a></li> 22 </ul> 23 <a id="siteLogo" href="../index.html"></a> 24 </header> 25 26 <article id="movieInfoContainer"> 27 28 <!--省略--> 29 30 </article> 31 32 </body> 33 34</html>

css

1*{padding:0;margin:0;box-sizing:border-box;} 2html,body{ 3 position:relative; 4 top:0; 5 overflow-x:hidden; 6 width:100vw; 7 font-size:17px; 8 -webkit-text-size-adjust:100%; 9 } 10 11body{background:#eee;font-family:sans-serif;} 12 13a:link,a:visited{text-decoration:none;} 14ul> li{list-style-type:none;} 15 16header{ 17 position:fixed; 18 top:0;left:0; 19 z-index:3; 20 transition:0.5s; 21 width:100vw; 22 height:10vh; 23 text-align:right; 24 background:#333; 25 } 26/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ 27#siteLogo{ 28 display:inline-block; 29 position:absolute; 30 top:0.5vh; 31 left:0.5vh; 32 width:9vh; 33 height:9vh; 34 background: url("../img/enjoyCinemasIcon.png") 0 0 / contain; 35 border-radius:9vh; 36 } 37#siteLogo:hover{ 38 animation: myspin 0.7s linear infinite; 39 } 40@keyframes myspin { 41 0%{transform:rotate(0deg);} 42 100%{transform:rotate(360deg);} 43 } 44/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ 45 46#menuButtonInput, 47#menuButton{display:none;z-index:1;} 48 49#menuItemContainer{ 50 display:inline-block; 51 overflow:hidden; 52 width:70vw; 53 height:10vh; 54 text-align:right; 55 padding-right:10vh; 56 } 57 58#menuItemContainer >li{ 59 display:inline-block; 60 height:10vh; 61 color:#fff; 62 font-size:calc(10vh / 3); 63 padding:calc(10vh / 3) 0; 64 } 65 66#menuItemContainer >li >a{ 67 position:relative; 68 transition:0.5s; 69 font-size:calc(10vh / 3); 70 height:10vh; 71 padding:0 3vh; 72 } 73#menuItemContainer >li >a::after{ 74 content:""; 75 display:inline-block; 76 position:absolute; 77 top:4vh; 78 left:50%; 79 transition-duration:0.5s; 80 width:0; 81 height:2px; 82 background:rgba(255,255,255,0.5); 83 } 84#menuItemContainer >li >a:link, 85#menuItemContainer >li >a:visited{color:white;} 86#menuItemContainer >li >a:hover::after{left:0;width:100%;} 87 88#movieInfoContainer{ 89 font-size:17px;/*:::base-font-size:::*/ 90 margin:100vh 15vw 5vw 15vw; 91 padding:5vw; 92 background:#fff; 93 } 94 95 96@media screen and (max-width:80vh) { 97 98/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ 99 #siteLogo{ 100 display:inline-block; 101 width:15vh; 102 height:15vh; 103 border-radius:15vh; 104 border:2px solid #555; 105 margin:0.5vh; 106 } 107 #siteLogo:hover{ 108 border:5px solid #777; 109 box-shadow:0 0 2px 3px #aaa; 110 transition:0.1s;animation-name:myspin; /*最初にanimation-name:none;を試すも効かず*/ 111 } 112 @keyframes myspin{ 113 0%{transform:rotate(0deg);} 114 100%{transform:rotate(0deg);} 115 } 116/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ 117 118 #menuButton{ 119 display:inline-block; 120 position:relative; 121 width:10vh;height:10vh; 122 } 123 #menuButton::before{ 124 content:""; 125 display:inline-block; 126 position:absolute; 127 top:1.25vh; 128 left:1vh; 129 width:8vh; 130 height:1.5vh; 131 background:#fff; 132 border-radius:0.5vh; 133 box-shadow: 0 3vh #fff, 0 6vh #fff; 134 } 135 136 #menuButtonInput:checked ~ #menuItemContainer{height:90vh;padding-top:10vh;} 137 138 #menuItemContainer{ 139 position:absolute; 140 top:10vh; 141 left:0; 142 transition:0.5s; 143 width:100vw; 144 height:0; 145 background:rgba(0,0,0,0.65); 146 } 147 #menuItemContainer > li >a{ 148 display:inline-block; 149 width:80vw; 150 height:3em; 151 text-align:center; 152 background:#444; 153 border-radius:0.5vh; 154 border-top:3px solid #666; 155 border-bottom:3px solid #666; 156 margin:5vh 8vw 5vh 12vw; 157 padding:1em; 158 } 159 #menuItemContainer > li >a::after{top:0;height:9vh;} 160 161 #movieInfoContainer{ 162 font-size:24px;/*:::base-font-size:::*/ 163 margin:calc(90vh + 5vw) 5vw 5vw 5vw; 164 } 165 } 166

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

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

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

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

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

kei344

2016/12/09 02:24

状況の再現が可能なHTML/CSSを質問文に追記ください。
guest

回答2

0

css

1animation: none; 2transform: none;

keyframe内ではなく、animationを実際に指定している箇所に上記を試してみて下さい。
また、念のためmedia queryの指定が正しいかも確認すると良いかと。

投稿2016/12/09 01:57

T_sa

総合スコア353

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

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

0

自己解決

###事故解決

PC再起動したらanimation:none;が効くようになってました。

なんでだろう?

投稿2016/12/09 03:44

-1an.vvks-

総合スコア71

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問