Пара небольших заметок о transition

#css

Для оптимального рендера в значении transition-property вместо all написать свойства, которые будут изменены.
Не возможно задать transition для display: block и display: none. Пример:

<button class="button">Нажми меня</button>

.button {
  background-color: tomato;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  padding: 15px;
  transition-duration: 0.2s;
  transition-property: opacity;
  opacity: 0.7;
}

.button:hover {
  opacity: 0;
}