我有以下代码:http://jsfiddle.net/odj8v0x4/.
function stopGlobe() {
$('.mapfront').removeClass('mapfront-anim');
$('.mapback').removeClass('mapback-anim');
}
function startGlobe() {
$('.mapfront').addClass('mapfront-anim');
$('.mapback').addClass('mapback-anim');
}@keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
}
}
@-webkit-keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@-webkit-keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
} …我有动画:
img.rotate {
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
我有无限的旋转图像.现在我想用JS改变旋转速度.我试过了:
$('img').css('animation-duration', '2s');
持续时间会改变速度,但动画会重新启动到帧密钥0%(第一个),但我只想让动画继续,就像什么也没发生一样; 我不想回到0%.
我怎样才能做到这一点？
在我的例子中,我正在使用Ian Lunn的"Bob".我真的很喜欢悬停效果,但是当我停止徘徊时,它会回到原来的位置.我怎样才能让我的div恢复到常规位置？
动画CSS:
animation-name: hvr-bob-float, hvr-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
jsfiddle: http ://jsfiddle.net/v3z9rLae/