html keyframes

Question

 

 

 

Wiem, że to może głupie i banalne ale czemu mi się nie podświetla ,,from" i ,,to", co czyni ze animacja nie działa.

@keyframes move{
  from {opacity: 0;}
  to {opacity: 1;}
}

 

Answer 1

Jak "podświetla"? W IDE? Jeśli tak to najedź, powinno się pokazać więcej informacji o tym błędzie, bo na pierwszy rzut oka kod wygląda OK.

Comments

nie podświetla w VSC

---

Nie podświetla w IDE, to gdzie? Wejdź w przeglądarkę, odpal devtools, najedź na ten fragment, może coś ci podpowie

Answer 2

Działa → https://jsfiddle.net/Comandeer/t3vzxfma/

Podaj więcej kodu, bo problem nie leży w samej animacji.

Comments

.kontener_na_zdjecia{
    /* background-color: violet; */
    width:1300px;
    height: 500px;
    margin: 200px auto;
    
}

.zdjecie1 input{
    float: left;
    border: 5px solid rgba(201, 75, 35, 0.6);
    border-radius: 6px;
    margin-right: 30px;
    
}

.zdjecie2 input{
    float: left;
    border: 5px solid rgba(201, 75, 35, 0.6);
    border-radius: 6px;
    margin-right: 30px;
    
}

.zdjecie3 input{
    float: left;
    border: 5px solid rgba(201, 75, 35, 0.6);
    border-radius: 6px;
    
}




@keyframes move{
  from {opacity: 0;}
  to {opacity: 1;}
}

 

---

A gdzie tę animację wykorzystujesz? Nigdzie nie widzę animation w CSS.

---

Ale to chyba nic nie zmienia bo próbowałem wpisywac animation i dalej to samo, moze mam stara wersje visuala ? Sam już niewiem 

---

W którym miejscu próbowałeś wpisywać animation?

VS code studio to tylko edytor kodu, on nic nie zmienia.

Równie dobrze w notatniku mógłbyś napisać.

Żeby animacja z keyframes zadziałała trzeba podać jej nazwę i parametry,

jak kolega w codepen wkleił kod.

Powiedzmy, że chcesz, żeby animacja zadziałała na kontenerze na zdjęcia:

.kontener_na_zdjecia{
    /* background-color: violet; */
    width:1300px;
    height: 500px;
    margin: 200px auto;
    animation: move 1s infinite
}

Podmień na ten kod i na bank zadziała.

Bo animacja w keyframes nazywa się move.

Bez tego nigdy nie zadziała.