CSS를 통한 다른 애니메이션

Question

내 HTML 페이지에는 이미지와 툴팁 만있는 요소가 거의 없습니다. CSS 부분에서 수행 한 애니메이션을 기반으로 무작위로 애니메이션을 적용하기를 원했습니다.

현재 페이지가로드 될 때 모든 요소가 함께 움직입니다. 원하는 것은 아닙니다.

jQuery에서 CSS 클래스를 하나씩 호출하는 것을 고려하고 있지만 요소 수를 살펴보고 기본 번역 애니메이션이므로이 작업을 수행하는 더 좋은 방법이 있습니까? 여기

는 요소 :

<div class="twitter-animate"> 
    <div id="twitter-wrap"><a href="#" id="twitter"><img src="img/link-twitter.png"></a></div> 
    <div id="twitter-tooltip"><span>Tweet!</span></div> 
</div> 


    <div id="youtube-wrap"><a href="#" id="youtube"><img src="img/link-youtube.png"></a></div> 
    <div id="youtube-tooltip"><span>YouTube</span></div> 

    <div id="facebook-wrap"><a href="#" id="facebook"><img src="img/link-fb.png"></a></div> 
    <div id="facebook-tooltip"><span>Facebook</span></div> 

    <div id="newspaper-wrap"><a href="#" id="newspaper"><img src="img/link-newspaper.png"></a></div> 
    <div id="newspaper-tooltip"><span>Newspaper</span></div> 

    <div id="www-wrap"><a href="#" id="www"><img src="img/link-www.png"></a></div> 
    <div id="www-tooltip"><span>Put your URL!</span></div> 

    <div id="email-wrap"><a href="#" id="email"><img src="img/link-email.png"></a></div> 
    <div id="email-tooltip"><span>Mail me!</span></div> 

Answer 1

간단히하기 위해 요소를 왼쪽에서 오른쪽으로 변환하려는 것으로 가정합니다. 툴팁도 관련성이 없으므로 제거하겠습니다.

가장 먼저해야 할 일은 모든 요소에 공통 클래스를 추가하는 것입니다. 여기에 내가 클래스로 share을 추가 :

<div id="twitter-wrap" class="share"><a href="#" id="twitter">Twitter</a></div> 
<div id="youtube-wrap" class="share"><a href="#" id="youtube">YouTube</a></div> 
<div id="facebook-wrap" class="share"><a href="#" id="facebook">Facebook</a></div> 
<div id="newspaper-wrap" class="share"><a href="#" id="newspaper">Newspaper</a></div> 
<div id="www-wrap" class="share"><a href="#" id="www">WWW</a></div> 
<div id="email-wrap" class="share"><a href="#" id="email">Email</a></div> 

다음과 같이 보일 것이다 당신의 CSS ...

.share { 
    width: 100px; 
    background-color: #333; 
    padding: 3px 0 3px 10px; 
    margin-bottom: 3px; 
    -webkit-transform: translate(-100px, 0); 
    -moz-transform: translate(-100px, 0); 
    -o-transform: translate(-100px, 0); 
    -ms-transform: translate(-100px, 0); 
    transform: translate(-100px, 0); 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    transition: all 500ms ease;  
} 

.share.animate { 
    -webkit-transform: translate(0, 0); 
    -moz-transform: translate(0, 0); 
    -o-transform: translate(0, 0); 
    -ms-transform: translate(0, 0); 
    transform: translate(0, 0); 
} 

는 그런 다음, 첫 번째 애니메이션을 화재 자바 스크립트의 조금 필요 각 trasition 다음 하나를 발사 종료 될 때 다음

//after document ready 
$(".share").first().addClass("animate") 

$(".share").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(e){ 
    $(e.target).next('.share').addClass("animate"); 
}) 

당신은 찾을 수 ... 듣고 모두 여기에 함께 넣어 : http://jsfiddle.net/HYAWj/

Answer 2

당신이 그들 모두 함께 애니메이션을 적용 할 수없는 경우,하지만 특정 시간 간격은 사용하지 않고 후 :

setTimeout(function() { 
    //Put in animation here 
}, 2500); 

2500 시간에 setTimeout 내의 코드가 실행되기 전에 지연 시간 (ms).