hoverしたときにスライドボトムで文字が映らないようにしたい

worksをhoverしたときに文字をスライドボトムで文字が映らないようにしたい

hoverしたときに背景画像であるアイコンがスライドアップして、「works」の文字がスライドダウンするようにしたいのですが、スライドダウンが効きません。><

HTML5
1<header>
2       <h1>Lianet.com</h1>
3        <ul>
4            <li class="works slideup">
5              <a href="#"><span>Works</span></a>
6            </li>
7            
8            <li class="skills slideup">
9              <a href="#">Skills</a>
10            </li>
11            
12            <li class="about slideup">
13              <a href="#">About</a>
14            </li>
15          
16            <li class="blog slideup">
17              <a href="#">Blog</a>
18            </li>
19
20            <li class="contact slideup">
21              <a href="#">Contact</a>
22            </li>
23           </ul>
24        </header>
25

CSS
1
2.works:hover {
3  background-image: url(../img/li1.png);
4  background-repeat: no-repeat;
5  background-size: 3rem;
6  animation-name: slideup;
7  animation-duration: 1s;
8}
9
10.works:hover span{
11  animation-name: slidedown;
12}
13
14@keyframes slideup{
15  0% {
16    opacity:0;
17}
18100% {
19    opacity:1;
20}
21}
22
23@keyframes slidedown{
24  0% {
25    opacity:1;
26}
27100% {
28    opacity:0;
29}
30}

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

回答1件

ベストアンサー

スライドアップ/スライドダウンを、フェイドイン/フェイドアウトの意味で使っているとして、

.works の opacity をアニメーションさせてますが、これは背景画像だけでなく、子要素にも聞いてしまいます。下記のリンク先の方法で背景画像だけ透過させればどうでしょう。

Background-image(背景画像)を透過させるCSS｜おがわ｜note

css
1.works:hover {
2  background-image: url(../img/li1.png);
3  background-repeat: no-repeat;
4  background-size: 3rem;
5  background-blend-mode:lighten;
6  animation-name: slideup;
7  animation-duration: 1s;
8}
9.works:hover span{
10  animation-name: slidedown;
11  animation-duration: 1s;
12  animation-fill-mode: forwards;
13}
14@keyframes slideup{
15  0% {
16    background-color:rgba(255,255,255,1);
17  }
18  100% {
19    background-color:rgba(255,255,255,0);
20  }
21}
22
23@keyframes slidedown{
24  0% {
25    opacity:1;
26  }
27  100% {
28    opacity:0;
29  }
30}

ホバーでフェイドイン/フェイドアウトさせるなら、transition を使った方がシンプルになりますね。

css
1.works {
2  font-size: 2rem;
3  background-image: url(https://picsum.photos/400/200);
4  background-repeat: no-repeat;
5  background-size: 3rem;
6  background-color:rgba(255,255,255,1);
7  background-blend-mode:lighten;
8  transition: 1s;
9}
10.works:hover {
11    background-color:rgba(255,255,255,0);
12}
13.works span{
14  transition: 1s;
15}
16.works:hover span{
17  opacity:0;
18}