相关疑难解决方法(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%.

我怎样才能做到这一点？

我没有默认的动画元素.还有一个触发器可以让我打开和关闭该元素的动画.动画本身非常简单:从左到右移动元素.

当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是:有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画.

这是我的元素和动画:http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 2s infinite ease-in-out;
}

@-webkit-keyframes dance {
  0%, 100% { -webkit-transform: translateX(0); }
  50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
  0%, 100% { -moz-transform: translateX(0); }
  50% { -moz-transform: translateX(300px); }
}

我已经创建了这个小提琴来演示这个问题:

http://jsfiddle.net/NfX56/

动画ROTATION和HOVER似乎可以很好地改变方向,但当我将鼠标悬停在项目上进行过渡时,TOGGLE是跳跃式的,而不是像我想的那样顺畅地反转方向.

这是没有浏览器前缀的基本代码:

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite reverse;
}

我一直试图玩弄以下内容:

transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-in-out;

试图平滑动画,使符号顺利地反转方向,但我似乎无法正确对待......任何帮助都会很棒!

http://jsfiddle.net/NfX56/

在我的例子中,我正在使用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/

我有一个动画移动background-position图像与关键帧,这很好.

虽然,当用户点击一个按钮时,我想暂停背景的动画但是有一个过渡,减慢然后停止background-position移动.

我搜索了类似的东西,但我没有找到任何东西,所以我想知道你们中是否有人会知道我怎么能这样做？

谢谢.