jquery动画刷卡

Question

我需要使品牌形象动画，所以当站点打开它shuld刷卡或线性从左侧到右侧，然后回到他的位置。我GOOGLE了，但我不知道如何使这个功能。

Answer 1

我知道你已经特别要求了JQuery，但对于这种类型的东西，随着CSS动画的添加，它不是真的需要。此外，如果您使用CSS动画，则对用户也有好处 - 即使JavaScript关闭或禁用公司的人也可以在使用CSS动画时看到动画。

下面是一个的jsfiddle我从一个jQuery的例子，改装用标志DIV从左到右：http://jsfiddle.net/ny7pxe7y/

更新：我读过动画使用左/右/上/下为移动设备上的粗糙性能明智的。你最好使用CSS转换。我用transform更新了左值：translateX（values）;可以在这里看到：http://jsfiddle.net/ny7pxe7y/5/（我用大众的[视口宽度单位]在这个更新的例子）

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