Błąd w przycisku :hover

Question

Witam,

Pisze z pytaniem o drobną pomoc. Mianowicie zrobiłem przycisk w css. Dałem mu funkcje hover oraz zrobiłem animacje w keyframes. Dodałem go do kodu html lecz nic nie działa. Animacja nie może się uruchomić. Poniżej zamieszczę kod do html i css aby pokazać jak to napisałem. Może ktoś bardziej ogarnięty odemnie będzie wiedział co jest nie tak.

HTML

<button class="meni">
            <img src="file:///C:/Users/oleks/Downloads/1000_F_224136032_b11na6zJLTpORSjfauRdpKamQDc7Uejv-Photoroom.png-Photoroom__1_-removebg-preview.png" style="height: 70px; width: 70px; margin-left: -0.2cm;">
 </button>

---------------------------------------------------------------------------------------------------------------------------------------------------------

CSS
 

.meni{
            height: 70px;
            width: 70px;
            z-index: 999;
            position: fixed;
            
        }

        @keyframes meni {
            10%{
                background-color: rgb(0, 253, 0);
            }
            20%{
                background-color: rgb(2, 215, 2);
            }
            30%{
                background-color: rgb(1, 172, 1);
            }
            40%{
                background-color: rgb(0, 126, 0);
            }
            50%{
                background-color: rgb(2, 100, 2);
            }
            60%{
                background-color: rgb(1, 80, 1);
            }
            70%{
                background-color: rgb(0, 60, 0);
            }
            80%{
                background-color: rgb(0, 36, 0);
            }
            90%{
                background-color: rgb(0, 20, 0);
            }
            100%{
                background-color: rgb(0, 12, 0);
            }
        }

        .meni:hover{
            animation: meni 3s forwards;
        }

 

Answer 1

W .meni (ciekawa nazwa ) ustal wartość "początkową" dla background-color na np. transparent

[ kod przykładu on-line ]

<button class="meni">
  <!-- <img src="file:///C:/Users/oleks/Downloads/1000_F_224136032_b11na6zJLTpORSjfauRdpKamQDc7Uejv-Photoroom.png-Photoroom__1_-removebg-preview.png" 
            style="height: 70px; width: 70px; margin-left: -0.2cm;"> -->
  <img src="https://picsum.photos/id/169/800/562">  
</button>

.meni {
  height: 70px;
  width: 70px;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}
.meni img {
  height: 100%; 
  width: 100%;
  /* margin-left: -0.2cm; */  
  object-fit: fill;

  /* dla prezentacji */
  margin-left: -2rem;
}
.meni:hover {
  animation: meni 3s forwards;
}
@keyframes meni {
  10% {
    background-color: rgb(0, 253, 0);
  }
  20% {
    background-color: rgb(2, 215, 2);
  }
  30% {
    background-color: rgb(1, 172, 1);
  }
  40% {
    background-color: rgb(0, 126, 0);
  }
  50% {
    background-color: rgb(2, 100, 2);
  }
  60% {
    background-color: rgb(1, 80, 1);
  }
  70% {
    background-color: rgb(0, 60, 0);
  }
  80% {
    background-color: rgb(0, 36, 0);
  }
  90% {
    background-color: rgb(0, 20, 0);
  }
  100% {
    background-color: rgb(0, 12, 0);
  }
}

 

 

 

BTW, jeżeli nie zależy Tobie na jakiś konkretnych kolorach w animacji między pierwszym kolorem a drugim, może zapisz np. tak:

@keyframes meni {
  from { background-color: rgb(0, 253, 0); }
    to { background-color: rgb(0, 12, 0); }
}

lub

@keyframes meni {
  0%   { background-color: rgb(0, 253, 0); }
  100% { background-color: rgb(0, 12, 0); }
}

lub

@keyframes meni {
  10%  { background-color: rgb(0, 253, 0); }
  100% { background-color: rgb(0, 12, 0); }
}

"przejścia" poszczególnych odcieni kolorów "obliczy" wtedy sama przeglądarka.

Comments

Masz element 70px na 70px.

Na tym elemencie masz na całej wielkości grafiką.

Zmieniasz kolor, który jest pod grafiką :) Animacja prawdopodobnie działa. Usuń grafikę i sprawdź.

---

Dodatkowo dodaj jakąś wartość background-color dla elementu .meni

 

Animacja tylko zmienia te wartość, jeżeli nie ustawisz początkowej to animacje się nie uruchomi :)