使用 css 转换更改显示的 CSS 属性？

Question

使用 css 过渡更改 hover/focus 上的 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

当元素 "appears" 时没有 CSS transition。使用 CSS 动画是执行您所描述内容的最优雅方式。过渡和动画之间的内存差异应该不是问题。

使用 css 转换更改显示的 CSS 属性？

Change CSS properties on display with css transitions?

css

css-transitions

css-animations