• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja w CSS

0 głosów
61 wizyt
pytanie zadane 8 marca w HTML i CSS przez Trekeren Początkujący (370 p.)

Mam problem ze zdobieniem animacji w css. Generalnie kwadrat ma zmieniać kolor.

Pomysł, czego brakuje lub co źle robię?

.window{
  width: 10px;
  height: 10px;
  background: yellow;
  @keyframes changeColor {
    from {
      background: blue;
    }
    to {
      background-color: yellow;
    }
  }
}

 

1 odpowiedź

+3 głosów
odpowiedź 8 marca przez Author[] Bywalec (2,800 p.)

@keyframes powinno być globalne (na górze css poza stylizacją elementu), zaś w elemencie powinien być:

animation-name: changeColor;

Poczytaj sobie tutaj: MDN

Poza tym należy dodać:

animation-duration: 2s; /*lub inny czas*/

Więc cały kod powinien wyglądać miej więcej tak:

@keyframes changeColor {
    from {
      background: blue;
    }
    to {
      background-color: yellow;
    }
  }
.window{
  width: 10px;
  height: 10px;
  background: yellow;
  animation-name: changeColor;
  animation-duration: 2s; /*dowolny czas byle nie 0 bo animacja się nie wyświetli*/
}

 

komentarz 8 marca przez Trekeren Początkujący (370 p.)
Dzięki

Podobne pytania

+1 głos
2 odpowiedzi 85 wizyt
pytanie zadane 16 marca w HTML i CSS przez Trekeren Początkujący (370 p.)
+1 głos
0 odpowiedzi 88 wizyt
+1 głos
2 odpowiedzi 84 wizyt
pytanie zadane 25 grudnia 2020 w HTML i CSS przez AgentTecza Obywatel (1,440 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

85,728 zapytań

134,512 odpowiedzi

298,568 komentarzy

56,635 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...