총알 시간 CSS 애니메이션 침체

Question

코드 JSFiddle에서 :

http://jsfiddle.net/wardrobe/6UVDD/

내가 마우스 오버에 크롤에 CSS 애니메이션이 원자의 애니메이션 속도를 늦추기 위해 jQuery를 사용하지만, 일부를 사용하여 그렇게 할 종류의 완화. jQuery를 사용하여 재생 상태를 쉽게 일시 중지하도록 설정할 수 있지만 크롤링 속도를 늦추려면 더 어려워 보입니다.

HTML

<div id="atom"> 
      <div id="cloud"> 
       <div class="orbit"> 
        <div class="path"> 
         <div class="electron"></div> 
        </div> 
       </div> 
       <div class="orbit"> 
        <div class="path"> 
         <div class="electron"></div> 
        </div> 
       </div> 
       <div class="orbit"> 
        <div class="path"> 
         <div class="electron"></div> 
        </div> 
       </div> 
       <div class="orbit"> 
        <div class="path"> 
         <div class="electron"></div> 
        </div> 
       </div> 
       <div id="nucleus"></div> 
      </div> 
     </div> 

CSS :

#atom { position: absolute; top: 50%; left: 50%; width:300px; margin-left: -170px; margin-top: -146px; transition: all 1.5s; } 

#cloud { width:300px; height:300px; -webkit-perspective: 1000; position:relative; -webkit-animation-play-state:paused;} 

#nucleus { position:absolute; top:50%; left:50%; margin: -10px 0 0 -10px; width:25px; height:25px; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; background: #272727;} 

.orbit { position:absolute; top:0; left:0; width:300px; height:300px; border-radius:300px; -webkit-border-radius:300px; -moz-border-radius:300px; border:5px solid #ccc; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(80deg) rotateY(20deg);} 

#cloud .orbit:nth-child(2) {-webkit-transform: rotateX(80deg) rotateY(70deg)} 
#cloud .orbit:nth-child(3) {-webkit-transform: rotateX(80deg) rotateY(-20deg)} 
#cloud .orbit:nth-child(4) {-webkit-transform: rotateX(80deg) rotateY(-50deg)} 

#cloud .orbit:nth-child(2) .path, #cloud .orbit:nth-child(2) .electron {-webkit-animation-delay: -1.0s} 
#cloud .orbit:nth-child(3) .path, #cloud .orbit:nth-child(3) .electron {-webkit-animation-delay: -1.5s} 
#cloud .orbit:nth-child(4) .path, #cloud .orbit:nth-child(4) .electron {-webkit-animation-delay: -0.5s} 

.path { width:300px; height:300px; position:relative; -webkit-transform-style: preserve-3d; -webkit-animation-name: pathRotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } 

.electron { position: absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:10px; background:#ccc; -webkit-animation-name: electronFix; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } 

@-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } } 

@-webkit-keyframes electronFix { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(-360deg); } } 

JS :

$(function() { 
    $("#atom").mouseover(function() { 
     $(".path").animate({"-webkit-animation-duration": "25s"}, {duration: 'slow'}); 
     $(".electron").animate({"-webkit-animation-duration": "25s"}, {duration: 'slow'}); 
    }).mouseout(function() { 
     $(".path").animate({"-webkit-animation-duration": "2s"}, {duration: 'slow'}); 
     $(".electron").animate({"-webkit-animation-duration": "2s"}, {duration: 'slow'}); 
    }); 
}); 

감사

Answer 1

나는 그것이 같은 것을 사용하는 것입니다 수행하는 방법을 알고있는 가장 쉬운 방법 이것을 허용하는 GSAP 기능을 아주 쉽게. 잠재적으로 당신은 GSAP과 같은 라이브러리가 없어도 엄청나게 복잡하고 시간이 많이 걸릴 것이며 불안해지며 악화 될 것입니다

그러나 GSAP과 같은 라이브러리가 도입되면 좀 더 간단 해집니다. 희망 코멘트

Demo

// Used to change the timings of all animations collectively 
var timeline = new TimelineMax({}), 
    electrons = document.querySelectorAll('.electron'), 
    paths = document.querySelectorAll('.path'), 
    startDuration = 2, 
    delay = 0.5, 

    // Gets the start of the last electron 
    lastTweenStartTime = (electrons.length - 1) * delay, 

    // Calculates when the last electron is done animating 
    lastTweenEndTime = lastTweenStartTime + startDuration; 

// Apply the GSAP animation to each electron and path 
for (var i = 0; i < electrons.length; i++) { 
    // Create the individual delay to create offset 
    var myDelay = (i * delay); 
    orbit(electrons[i], paths[i], myDelay); 
} 

// Slow the animation on mouseover 
document.getElementById("atom").onmouseover = function() { 
    TweenLite.to(timeline, startDuration, { 
     timeScale: 0.1 
    }); 
} 
// Set the animation back to normal on mouse leave 
document.getElementById("atom").onmouseout = function() { 
    TweenLite.to(timeline, startDuration, { 
     timeScale: 1 
    }); 
} 

// Repeat it when the last electron is done animating 
timeline.add(repeat, lastTweenEndTime); 

// Start ahead so there is no load time 
timeline.seek(1.5); 

// Give each electron and path their individual animations 
function orbit(electron, path, delay) { 
    var e = TweenMax.fromTo(electron, startDuration, 
    // Initial rotationX of 90 to make dots visible 
    { rotationX: '90' }, 
    // Keep the dots upright for the duration of the animation 
    { 
     rotationZ: '-360', 
     rotationX: '90', 
     ease: Linear.easeNone, 
     repeat: 1 
    }); 
    var p = TweenMax.to(path, startDuration, { 
     rotationZ: '360', 
     ease: Linear.easeNone, 
     repeat: 1 
    }); 
    // Add that animation to the total timeline 
    timeline.add([e, p], delay); 
} 

// Repeat the animation 
function repeat() { 
    timeline.play(lastTweenStartTime); 
}