Animation

Syntax

Value: <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

Spinner

.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-right-color: #000;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

spinner/index.html:

Bounce

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(-100px);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-50px);
    animation-timing-function: ease-out;
  }
  90% {
    transform: translateY(-50px);
  }
}

.bounce {
  animation-name: bounce;
  animation-duration: 2s;
  animation-delay: .5s;
}

bounce/index.html:

References