通过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动画是执行所描述内容的最优雅的方法。过渡和动画之间的内存差异不应该成为问题。