The animation property

As I continue the climb of Mount CSS, I find that I'm learning so many new tricks. My latest discovery is the animation property of CSS.

I'm working on a static site to practice my dev skills with HTML, CSS and JS. The site simply lists 10 of my favorite video game tunes with a brief description of why I love the song so much and even a few notes on the composer and the game it is from. An idea I had was for the individual "cards" that hold the song information for each song to have an animated background upon a hover of the mouse. I'm still working towards that, but decided to scale it down and attempt a basic use of the animate property that would effect all the cards simultaneously(only for now.)

Since I'm using classes with my individual song cards, I placed the animation property within the CSS syntax that affects each card.

.song-div {
  .....
  .....
  animation: change 5s infinite;
}

@keyframes change {
  0% {
    background-color: rgb(149, 247, 146);
  }
  100% {
    background-color: rgba(8, 99, 26, 0.687);
  }
}

I used the variable name of "change" that I assigned when I wrote the keyframes at-rule that tells "change" how to behave: in this case at 0% be one color and at 100% be a totally different color. The value of the animation property was a short-hand value that called on the change at-rule, gave it a length of time to perform the action, and how often it should be performed. With these things in place I was able to animate a color change for all of my cards.

As cool as this is, I'm looking forward to even more cool possibilities with the animate property. I hope to have cool updates for you as I continue to develop the site. Happy Coding!