animate css keyword code example

Example 1: css animation

CSS animation properties template:
{
   animation-name: anima-name;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: reverse | normal | alternate | alternate-reverse ; 
  animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)); 
  animation-fill-mode:forwards | backwards | both | none;
}
@keyframes anima-name {
  from {
   background-position:right;
  }
  to {
    background-position:left;
  }
}
@keyframes anima-name {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

Example 2: css animation shorthand

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;