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

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

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

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

HTML5

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

Q&A

解決済

3回答

723閲覧

横に流れていくアニメーションを実装したいです

Lian07jp

総合スコア7

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2021/12/21 22:34

編集2021/12/21 23:44

CSSで画像が画面の端から端に流れていくアニメーションを実装したいのですが画像サイズが大きいまま変わらずflexもきいてくれません><

HTML

1<div class="works"> 2 <ul> 3 <li><a href="#"><img src="img/loop1.jpg" alt=""></a></li> 4 <li><a href="#"><img src="img/loop2.jpg" alt=""></a></li> 5 <li><a href="#"><img src="img/loop3.jpg" alt=""></a></li> 6 <li><a href="#"><img src="img/loop4.jpg" alt=""></a></li> 7 <li><a href="#"><img src="img/loop5.jpg" alt=""></a></li> 8 <li><a href="#"><img src="img/loop6.jpg" alt=""></a></li> 9 </ul> 10 <ul> 11 <li><a href="#"><img src="img/loop1.jpg" alt=""></a></li> 12 <li><a href="#"><img src="img/loop2.jpg" alt=""></a></li> 13 <li><a href="#"><img src="img/loop3.jpg" alt=""></a></li> 14 <li><a href="#"><img src="img/loop4.jpg" alt=""></a></li> 15 <li><a href="#"><img src="img/loop5.jpg" alt=""></a></li> 16 <li><a href="#"><img src="img/loop6.jpg" alt=""></a></li> 17 </ul> 18 </div>

CSS

1header ul li{ 2 list-style: none; 3 text-align: center; 4 margin: 0 auto; 5} 6 7header ul li a{ 8 color:#333; 9} 10 11.works:hover{ 12 background-image: url(../img/li1.png); 13 animation-name: slideup; 14 background-repeat: no-repeat; 15 background-size: contain; 16 margin-top: -10px; 17} 18.blog:hover{ 19 background-image: url(../img/li2.png); 20 animation-name: slideup; 21 background-repeat: no-repeat; 22 background-size: contain; 23} 24.about:hover{ 25 background-image: url(../img/li3.png); 26 animation-name: slideup; 27 background-repeat: no-repeat; 28 background-size: contain; 29} 30.skills:hover{ 31 background-image: url(../img/li4.png); 32 animation-name: slideup; 33 background-repeat: no-repeat; 34 background-size: contain; 35} 36.contact:hover{ 37 background-image: url(../img/li5.png); 38 animation-name: slideup; 39 background-repeat: no-repeat; 40 background-size: contain; 41}

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

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

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

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

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

guest

回答3

0

cssのクラス名を間違えていたみたいです><
ありがとうございました!

投稿2021/12/22 21:11

Lian07jp

総合スコア7

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

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

m.ts10806

2021/12/22 21:36

それでどうして私の回答がベストアンサーなのでしょうか。
Lian07jp

2021/12/23 09:31

#worksを.worksと指摘いただいたからです!
m.ts10806

2021/12/23 09:35

「CSS間違えておりましたので編集いたしました! 」とコメントされたので、提示するコードを間違えたのかと思っていたのですが、その後何もコメントがないままだったので、物凄く不明なままです。
Lian07jp

2021/12/23 09:55

その後のコメントが抜けており失礼しました。 編集後のCSSでもクラスとidををまちがえていたので、この変更で対処できました。
guest

0

よくわからんけど、下記のようなこと?

css

1.works{ 2 display: flex; 3 width: 100%; 4 overflow: hidden; 5} 6 7.works ul { 8 display:flex; 9 animation: loop 20s linear infinite backwards; 10} 11 12@keyframes loop { 13 0% { 14 transform: translateX(0%); 15 } 16 100% { 17 transform: translateX(-100%); 18 } 19}

Codepenサンプル

投稿2021/12/22 04:16

hatena19

総合スコア33620

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

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

0

ベストアンサー

class="works"

でしたら

diff

1- #works 2+ .works

なので、現状ほぼすべての要素に提示のCSSは効いてないということになるのではと。

投稿2021/12/21 22:45

編集2021/12/21 22:45
m.ts10806

総合スコア80765

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

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

Lian07jp

2021/12/21 23:44

CSS間違えておりましたので編集いたしました!
m.ts10806

2021/12/22 00:24

HTMLは全て提示してください。 cssに指定されてる要素で提示HTMLにない要素が沢山ありますのでこちらの手元で同じ状況で見れません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問