.element {
  transition: <property> <duration> <timing-function> <delay>;
}

.element {
  transition-property: <property>;
  transition-duration: <duration>;
  transition-timing-function: <timing-function>;
  transition-delay: <delay>;
}

.box {
  transition: opacity 200ms ease-in 1s;
}

.element {
  transition-timing-function: cubic-bezier(x1, x2, x3, x4);
}

.element:hover
.element:active
.element:focus
...
.element.classname
.element#idname
...

#button {
    opacity: 0.5;
    transition-duration 1s;
}

#button.active {
    opacity: 1;
}

.element {
  background-color: red;
}

.element:hover {
  background-color: blue;
  transition-duration: 1s;
}

.element {
  background-color: red;
  transition-duration: 1s;
}

.element:hover {
  background-color: blue;
}

@keyframes <animation name> {
  <keyframe-selector > {
    property: value;
  }
}

@keyframes ballRebond {
  0% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 0px;
  }
}

@keyframes ballRebond {
  0%,
  100% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
}

@keyframes ballRebond {
  from,
  to {
    top: 0px;
  }
  50% {
    top: 100px;
  }
}

.elementToAnimate {
  animation-name: <animation-name>; // obligatoire
  animation-duration: <animation-duration>; //obligatoire
  animation-timing-function: <animation-timing-function>;
  animation-delay: <animation-delay>;
  animation-iteration-count: <animation-iteration-count>;
  animation-direction: <animation-direction>;
  animation-fill-mode: <animation-fill-mode>;
  animation-play-state: <animation-play-state>;
}