Animacja w CSS

Question

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;
    }
  }
}

 

Answer 1

@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*/
}

 

Comments

Dzięki