animation-delayがマウスオーバーしたときにもかかってしまって困っています

Question

fadInアニメーションを更新時に読みこむようにしたいのですが、マウスオーバー時にもかかってしまって困っています。

<li class="works fadeIn">
    <a href="#">
        <span>works</span>
    </a>
</li>

.works {
  position: absolute;
  top: 20%;
  left: 24%;
  transform: translateY(-50%) translateX(-50%);
  background-image: url(../img/workpict.png);
  background-size:auto 40%;
  background-repeat: no-repeat;
  background-position: top 10rem left 50% ;
  /*background-color:rgba(255,255,255,1);*/
  background-blend-mode:lighten;
  animation-delay: 0.5s;
}


.works a:hover span {
  animation-name: slidetop;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

@keyframes slidetop {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(50%);
  }
}

.works:hover {
  animation-name: slidebottom;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes slidebottom {
  0% {
    background-position: top 10rem left 50%;
  /*background-color:rgba(255,255,255,1.0);*/
      background-size:auto 70%;
  }
  30% {
        background-position: top 10rem left 50%;
  /*background-color:rgba(255,255,255,1.0);*/
          background-size:auto 70%;
  }
    41% {
  /*background-color:rgba(255,255,255,1.0);*/
  }
  
  100% {
    background-position: top 40% left 50%;
  /*background-color:rgba(255,255,255,0);*/
      background-size:auto 70%;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Comments

[yambejp]

HTMLが中途半端で再現性がありません

[Lian07jp]

なにを記述したらよいですか？

[Lhankor_Mhy]

ご提示のコードには .works が存在しないようです。 li についているのでしょうか？

[Lhankor_Mhy]

「fadInアニメーション」とは、slidetop のことでいいですか？

[Lian07jp]

fadeIn アニメーションはまた別で存在します

Answer 1

どのようにしたいのかが今ひとつわからないのですが、複数のプロパティ値を設定できることをお忘れのように見受けられました。
それぞれのアニメーションについてそれぞれに適切な値を指定すれば問題が解決しそうに思いました。

複数のアニメーションプロパティ値の設定 | CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN

Comments

[Lian07jp]

ありがとうございます。それぞれのアニメーション見直してみます！