Connect selectors to @keyframes

animation-name

Specify which animation @keyframes to use with a selector declaration.

Property values

The animation-name connects a CSS selector to a @keyframes specification. In order for an animation to be useful, it must have both a name and a corresponding @keyframes declaration.

Examples

.cool {            
    animation-name: grow-height;
}

@keyframes grow-height {
  from {
    height: 0px;
  }

  to {
    height: 100px;
  }
}

animation-name