DEV Community

Stanislav Karol
Stanislav Karol

Posted on • Updated on

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

  • Для оптимального рендера в значении transition-property вместо all написать свойства, которые будут изменены.
  • Не возможно задать transition для display: block и display: none. Пример:
<button class="button">Нажми меня</button>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)