vimwiki

Css keyframes

Animation properties

The keyframes work with the following animations properties:

• animation-duration
• animation-name: identifier used when declaring the keyframe
• animation-iteration-count: can be set to infinite
• animation-direction: set it to alternate to have the animation alternate direction on completion

.element {
  animation-duration: 2s;
  animation-name: change-color;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  
  // or
  
  animation: 2s infinite alternate change-color;
}

Keyframes

Define state at given animation time. The keyword from/to are aliases for 0%/100%.

@keyframes change-color {
  from {
    background-color: red;
  }
  
  50% {
    background-color: blue;
  }

  to {
    background-color: green;
  }
}