css - 使用 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 动画是执行您所描述的最优雅的方式。过渡和动画之间的内存差异应该不是问题。