Question

我有一个纯粹的CSS动画自动收录器，在页面加载完美。动画的速度正是我想要的。

问题在于您调整浏览器大小。出于某种原因，当你这样做时，动画加速，当消息离开屏幕时，它不会回来很长时间。我认为这是计算宽度的一个问题，但不确定如何修复它。

的jsfiddle https://jsfiddle.net/79cmwcjw/2/

CSS /简化为简洁

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.inside {
    width: auto !important;
    display: inline-block !important;
    height: 20px !important;
    line-height: 20px;
    white-space: nowrap; 
    padding:0 0 0 100% !important;

    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 20s;
}

.inside a {
  display: inline-block;
  padding:0 200% 0 0 !important;
}

Answer 1

由display: inline-block元素.inside引起的。如果删除它，它将正常工作。这里是jsFiddle：https://jsfiddle.net/79cmwcjw/18/

<强>更新这是新的小提琴：https://jsfiddle.net/79cmwcjw/33/

基本上，您需要将position: absolute添加到.inside元素，并从内部的a中删除填充。

CSS3 Animation可以加速浏览器调整大小

1 个答案: