Code in JSFiddle:
http://jsfiddle.net/wardrobe/6UVDD/
I want to use jQuery to slow the animation speed of a CSS-animated atom to a crawl on mouseover, but to do so using some kind of easing. I can get jQuery to change the play state to paused easy enough, but to slow to a crawl seems harder.
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'});
});
});
Thanks