/* Zkosení */
.skew {
  transform: skew(-15deg);
}

/* Otočení */
.rotate {
  transform: rotate(-15deg);
}

/* Posun */
.translate {
  transform: translate(0, 50%);
}

/* Změna velikosti */
.scale {
  transform: scale(1.5);
}

button {
  background-color: blue;
  transition: 300ms;
}

button:hover {
  background-color: red;
}

div {
  /* co se bude animovat */
  transition-property: margin, height, ...;

  /* jakým způsobem se bude animovat */
  transition-timing-function: ease | linear |...;
}

div {
  /* jak dlouho bude animace probíhat */
  transition-duration: 500ms | 0.5s;

  /* jak dlouho se počká než začne průběh */
  transition-delay: 500ms | 0.5s;
}

element {
  transition: ([transition-property]) [transition-duration]
    ([transition-timing-function]) ([transition-delay]);
}

div {
  margin-top: 100px;
  transition: margin-top 300ms ease 1s;
}

div:hover {
  margin-top: 200px;
}

.icon {
  animation-name: spin; /* název shodný s názvem za @keyframes */
  animation-duration: 2s; /* trvání animace */
  animation-iteration-count: infinite; /* počet opakování */
  animation-timing-function: linear; /* průběh animace */
}

@keyframes spin {
  from {
    /* výchozí stav prvku */
  }

  to {
    /* koncový stav prvku */
  }
}