Jquery animation swipe

Question

I need to make may brand-image animated so when site open it shuld swipe or go linear from left side to right side and then back on his position. I googled it but i dont know how to make this funciton.

[This answer](http://stackoverflow.com/questions/3042092/using-jquery-animate-to-animate-a-div-from-right-to-left) should give you all the information you need. — Goose, Jul 22 '16 at 12:34
sorry guys i done it so thats why i didnt responded guys who answered me on the bottom showed me how — Predrag Grbatinic, Aug 23 '16 at 11:00

Tom · Accepted Answer · 2016-07-22T15:22:14.333

I know you've specifically asked for JQuery, but it isn't really needed for this type of thing anymore with the addition of CSS animations. Also there is a benefit to users if you use CSS animations-- even people with JavaScript turned off or corporate disabled will be able to see the animation if you use CSS animations.

Here is a JSFiddle I've modified from a JQuery example with a logo div going left to right: http://jsfiddle.net/ny7pxe7y/

UPDATE: I've read animating use left/right/top/bottom is rough on mobile devices performance-wise. You're better off using CSS transforms. I've updated the left values with transform: translateX(values); which can be seen here: http://jsfiddle.net/ny7pxe7y/5/ (I've used vw's [viewport width units] in this updated example)

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%
  }
}

Jquery animation swipe

1 Answers1