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

Question

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

<div class="works">
          <ul>
            <li><a href="#"><img src="img/loop1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop5.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop6.jpg" alt=""></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="img/loop1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop5.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/loop6.jpg" alt=""></a></li>
          </ul>
      </div>

header ul li{
    list-style: none;
    text-align: center;
    margin: 0 auto;
}

header ul li a{
    color:#333;
}

.works:hover{
    background-image: url(../img/li1.png);
    animation-name: slideup;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -10px;
}
.blog:hover{
    background-image: url(../img/li2.png);
    animation-name: slideup;
    background-repeat: no-repeat;
    background-size: contain;
}
.about:hover{
    background-image: url(../img/li3.png);
    animation-name: slideup;
    background-repeat: no-repeat;
    background-size: contain;
}
.skills:hover{
    background-image: url(../img/li4.png);
    animation-name: slideup;
    background-repeat: no-repeat;
    background-size: contain;
}
.contact:hover{
    background-image: url(../img/li5.png);
    animation-name: slideup;
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 1

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

Comments

[m.ts10806]

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

[Lian07jp]

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

[m.ts10806]

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

[Lian07jp]

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

Answer 2

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

.works{
  display: flex;
  width: 100%;
  overflow: hidden;  
}

.works ul {
  display:flex;
  animation: loop 20s linear infinite backwards;
}

@keyframes loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

Codepenサンプル

Answer 3

class="works"

でしたら

- #works
+ .works

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

Comments

[Lian07jp]

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

[m.ts10806]

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