CSS 애니메이션 - 한 요소 다음에 애니메이션 적용

Question

CSS를 사용하여 요소 하나를 다른 요소로 움직이기를 원합니다. 나는 그것을 작동시킬 수없는 것 같습니다, here 지금까지 내 시도입니다. 두 가지 주요한 문제가 있습니다 :

1) 내 애니메이션이 발생하지 않습니다.

2) 발생하면 각 요소를 동시에 애니메이션화합니다. 마지막 요소가 끝나면 다음 요소에 애니메이션을 적용하고 싶습니다. CSS에 이런 종류의 기능이 아직 있습니까?

3) 나는 그것이 무한하고 싶다.

이름이 3 인 것 같지만 애니메이션이 재생되지 않으므로 테스트 할 수 없습니다. 로딩 애니메이션을 만들려고하는데 이상하게 JS를 사용하고 싶지 않습니다. 이것이 나쁜 습관이라고 가정합니다.

Answer 1

animation-direction: alternate를 사용

데모. 무한한 접근법을 원한다면 더 깨끗하다고 ​​생각합니다. Here's the fiddle.

표시 추가 : 없음;

.e {display:none;} 

그리고 jQuery를 선택 $('.e')에서 제공하는 요소의 컬렉션을 처리하는 즉시 호출 기능 식 (인생)을 사용 : 전자 클래스. 응답

(function($){ 
    (function fadeNext(collection){ 
     collection.eq(0).fadeIn(1000, function(){ 
      (collection=collection.slice(1)).length 
      && fadeNext(collection) 
     }); 
    })($('.e')) 
})(jQuery) 

편집 댓글을 :

은 무한에주의하십시오. clearTimout() 호출을 추가하여 더 이상 필요하지 않다고 판단한 후에 실행을 중지하고자 할 수 있습니다. 여기에 업데이트 된 JS 코드 (updated fiddle)입니다 :

(function($){ 

    var el = $('.e'); 
    var animationLength = 1000; 
    var duration = el.length * animationLength + animationLength; 
    var clearAfter = 100; 
    var animation; 

    function fadeNext(collection){ 
     collection.eq(0).fadeIn(animationLength, function(){ 
      (collection=collection.slice(1)).length 
      && fadeNext(collection) 
     }); 
    } 

    function play(){ 
     fadeNext(el); 
     animation = setTimeout(function(){ 
      el.hide(); 
      play(); 
     }, duration); 
    } 
    play(); 

    setTimeout(function(){ 
     clearTimeout(animation); 
    }, duration * clearAfter); 
})(jQuery) 

Answer 2

모든 요소에 다른 animation-delay을 추가해야합니다. 당신이 질문 내가 jQuery를 접근 방식을 제공하고있어에서 jQuery를 태그를 가지고 있기 때문에 --->jsbin

@keyframes load { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
.e { 
 
    width: 100%; 
 
    height: 30px; 
 
    opacity: 0; 
 
} 
 
.one { 
 
    background: red; 
 
    -webkit-animation: load 5s infinite; 
 
    animation: load 5s infinite; 
 
} 
 
.two { 
 
    background: green; 
 
    -webkit-animation: load 5s infinite 1s; 
 
    animation: load 5s infinite 1s; 
 
} 
 
.three { 
 
    background: yellow; 
 
    -webkit-animation: load 5s infinite 2s; 
 
    animation: load 5s infinite 2s; 
 
} 
 
.four { 
 
    background: pink; 
 
    -webkit-animation: load 5s infinite 3s; 
 
    animation: load 5s infinite 3s; 
 
} 
 
.five { 
 
    background: purple; 
 
    -webkit-animation: load 5s infinite 4s; 
 
    animation: load 5s infinite 4s; 
 
}

<div class="e one"></div> 
 
<div class="e two"></div> 
 
<div class="e three"></div> 
 
<div class="e four"></div> 
 
<div class="e five"></div>

Answer 3

나는이 오래된 티켓 알고,하지만 내 대답은 사람을 도움이 될 수 있기를 바랍니다. 당신이 다음이를 사용하는 CSS 플러그인을 사용하기 괜찮 경우

:

.anim-delay-500ms { animation-delay: 0.5s } 
.anim-delay-1000ms { animation-delay: 1s } 
.anim-delay-1500ms { animation-delay: 1.5s } 
.anim-delay-2000ms { animation-delay: 2s } 

HTML은 다음과 같이 보일 것이다 : https://daneden.github.io/animate.css/

지연 편리한 사용자 정의 CSS를 유지하고이 같이 따라 사용

<div class="animated fadeInDown anim-delay-500ms">First Content</div> 
<div class="animated fadeInDown anim-delay-1500ms">Second Content</div> 
<div class="animated fadeInDown anim-delay-2000ms">Third Content</div> 
<div class="animated fadeInDown anim-delay-2500ms">Fourth Content</div> 

애니메이션과 함께 사용할 몇 가지 추가 컨트롤이 있습니다.CSS

#yourElement { 
    -vendor-animation-duration: 3s; 
    -vendor-animation-delay: 2s; 
    -vendor-animation-iteration-count: infinite; 
} 

참고 : https://github.com/daneden/animate.css/

: 당신이 여기에서 참조 할 수 있습니다 더 문서에 대해서는 해당 공급 업체 접두사 (웹킷, MOZ 등)

으로 CSS에서 "공급 업체"대체해야