显示无过渡 - CSS

在网页设计中，有时候我们需要将某些元素的变化直接显示出来，而不需要有任何过渡。这时候就需要用到 CSS 的一些属性来实现。

transition 属性

在CSS中，transition属性用来定义元素从一个状态到另一个状态时的过渡效果。但如果我们希望完全没有过渡效果，该怎么办呢？可以将 transition 设置为 none，这样就可以实现无过渡的效果。

.element {
  transition: none;
}

animation 属性

除了 transition，animation 也是实现变化效果的一种方式。类似于 transition，animation 也有一个关键词 none，用来取消动画效果。

.element {
  animation: none;
}

不过需要注意的是，animation 属性需要设置动画的具体内容，否则即使将关键词设置为 none，元素也依然会有一些闪动。因此在取消动画效果时，需要把 animation-name 设置为 none。

.element {
  animation-name: none;
}

补间动画

以上介绍的方法，适用于所有的动画，包括 CSS 的补间动画。利用关键词 none，可以使元素从一个状态直接变成另一个状态，而不会有任何过渡效果。

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

.element {
  animation: example 1s none;
}

总结

以上就是 CSS 中实现无过渡效果的方法。可以利用 transition、animation、animation-name 等属性来取消元素的过渡或动画效果。在取消动画效果时，需要把 animation-name 设置为 none。