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