Jquery 动画滑动答案

【问题标题】：Jquery animation swipeJquery 动画滑动
【发布时间】：2016-11-26 08:35:18
【问题描述】：

我需要制作可能的品牌形象动画，因此当网站打开时，它应该从左侧滑动或线性移动到右侧，然后回到他的位置。我用谷歌搜索了它，但我不知道如何制作这个功能。

【问题讨论】：

This answer 应该为您提供所需的所有信息。
也显示你的代码
你能告诉我们你已经尝试过什么
对不起，伙计们，我这样做了，这就是为什么我没有回复底部回答我的人告诉我如何

【解决方案1】：

我知道您特别要求使用 JQuery，但由于添加了 CSS 动画，此类事情不再需要它。如果您使用 CSS 动画，对用户也有好处 - 如果您使用 CSS 动画，即使关闭 JavaScript 或禁用公司的人也可以看到动画。

这是我从一个 JQuery 示例修改的 JSFiddle，其中徽标 div 从左到右：http://jsfiddle.net/ny7pxe7y/

更新：我读过动画使用左/右/上/下在移动设备性能方面很粗糙。你最好使用 CSS 转换。我已经用 transform: translateX(values); 更新了左边的值。可以在这里看到：http://jsfiddle.net/ny7pxe7y/5/（我在这个更新的示例中使用了 vw 的 [视口宽度单位]）

HTML：

<div id="logo" class="demoStyle">LOGO</div>

CSS：

#logo {
  position: absolute;
  top: 0;
  left: 100%;
  -webkit-animation: slide 1.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 1.5s forwards;
  animation-delay: 0.5s;
}

.demoStyle {
  line-height: 50px;
  display: block;
  background: yellow;
  width: 3em;
  height: 50px;
}

@-webkit-keyframes slide {
  100% {
    left: 0%;
  }
  75% {
    left: 100%;
  }
  50% {
    left: 0
  }
  25% {
    left: 100%;
  }
  0% {
    left: 0%
  }
}

【讨论】：