css 过渡跳到中心

Question

我正在尝试并学习 Chrome 将对象从左向右移动并将其淡出，但我不明白为什么过渡会在开始时跳到中心。

css:

#splash {
position: absolute;
animation-duration: 4s;
animation-name: fadeOut;
animation-fill-mode: forwards;
transition:4s;
right: 100%;
}

@keyframes fadeOut {
from {
left: 0;
opacity: 1;
}
to {
right: 0;
opacity: 0;
visibility: hidden;
}
}

HTML:

<div id="splash">A</div>

Answer 1

试试这个：

#splash {
  position: absolute;
  animation-duration: 4s;
  animation-name: fadeOut;
}

@keyframes fadeOut {
  from {
    left: 0;
    opacity: 1;
  }
  to {
    left: 100%;
    opacity: 0;
  }
}

See this fiddle.

就像@connexo 在他的评论中所说的那样，visibility 无法设置动画，但这不是问题所在。相反，您不能像您尝试的那样为 left 和 right 设置动画，而是必须在动画中坚持其中一个属性（顺便说一句，这也适用于 top和 bottom).

此外，我从 #splash { ... } 规则中删除了 transition 样式，在使用 @keyframes 和 animation 样式时没有必要。

css 过渡跳到中心

css transition jump to center

css

transition