回答率: 85.35%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.35%

トップ CSS3に関する質問

Q&A

解決済

3回答

790閲覧

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

総合スコア7

0グッド

0クリップ

投稿2021/12/21 22:34

編集2021/12/21 23:44

0

0

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}

行動規範の内容に同意します

回答3件

0

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

投稿2021/12/22 21:11

総合スコア7

2021/12/22 21:36

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

2021/12/23 09:31

#worksを.worksと指摘いただいたからです！

2021/12/23 09:35

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

2021/12/23 09:55

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

行動規範の内容に同意します

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

総合スコア34075

0

ベストアンサー

class="works"

でしたら

diff
1- #works
2+ .works

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

投稿2021/12/21 22:45

編集2021/12/21 22:45

総合スコア80875

2021/12/21 23:44

CSS間違えておりましたので編集いたしました！

2021/12/22 00:24

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

関連した質問

トップ CSS3に関する質問

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