CSS转换 - 计时问题

时间:2016-02-29 18:13:59

标签: css css3 css-transitions css-animations

我有两个div想要在屏幕上转换,使其看起来像一个无限循环。我已经调整了setTimeouts并设置了一个事件监听器(transitionend),但是我在div之间一直存在巨大的差距。这是使用事件监听器的js fiddle的链接。下面是我在不使用事件监听器的情况下使用的代码。

的Javascript

 var boxWrap = $('#one');
 var boxWrap2 = $('#two');

 boxWrap.addClass('start')
 boxWrap2.addClass('start')

 setInterval(function () {
  boxWrap.removeClass('start')
  boxWrap[0].offsetTop
  boxWrap.addClass('start')
 }, 35000)

setInterval(function () {
  boxWrap2.removeClass('start')
  boxWrap2[0].offsetTop
  boxWrap2.addClass('start')
}, 35000)

CSS

  .boxWrapper.start {
    transition: right linear 35s;
    right: calc(-144vmin - 80vmin - 200vmin);
   }

   .boxWrapper.boxWrapper2.start {
     transform: translateX(-224vmin);
     transition: right linear 35s;
     right: calc(-144vmin - 80vmin - 200vmin);
  }

告诉我你是否有任何需要。

0 个答案:

没有答案