Изменить свойства CSS на дисплее с помощью CSS-переходов?

Question

Достаточно легко изменить свойства CSS при наведении / фокусе с помощью переходов CSS, но возможно ли это сделать при появлении элемента?

Один из возможных способов - это сделать с помощью анимации.Если я хочу создать эффект увеличения непрозрачности при появлении элемента, я могу сделать следующее:

.element {
  color: #1dd1a1;
  margin: 0 auto;
  margin-bottom: 2rem;
  opacity:0;
  animation: animOpacity 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes animOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Таким образом, элемент будет отображаться с увеличением непрозрачности.Есть ли более элегантный способ сделать это без использования анимации?Я слышал, что анимации CSS используют больше памяти, чем переходы CSS

Заранее спасибо

Answer 1

CSS transition отсутствует, когда элемент «появляется».Использование CSS-анимации - самый элегантный способ сделать то, что вы описываете.Разница в памяти между переходами и анимацией не должна быть проблемой.