相关疑难解决方法(0)

是否可以@keyframes使用javascript,jQuery或其他方法获取/设置CSS3 动画的当前动画百分比？

比如说有一个div叫做类的类.spin,它只是使用一个也被称为的关键帧在一个圆圈中旋转spin.

1. 我试图让使用动画的当前百分比值$('.spin').css('animation'),$('.spin').css('animation: spin')以及其他一些方法,但他们都警觉空

2. 我也有兴趣在每个关键帧预定义%改变原有的动画,我曾尝试喜欢的东西$('.spin').css('animation', '..new definition here...'),并$('.spin').css('spin', '50%', '...new definition here...)没有用.

有任何想法吗？

假设我们有一个像这样的动画:http://jsfiddle.net/utterstep/JPDwC/

布局:

<div>back</div>
<div class="animating"></div>
<div>forward</div>

和相应的CSS:

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: someanimation 5s infinite;
}

当我向后或向前按时,我想进入下一个或上一个动画状态.可以有多个对象,我想同时切换它们的动画状态.

它是否可能通过CSS或CSS + JS,或者它可能更容易我只是在pure-JS中重写我的代码？(目前我不喜欢这个想法,因为我有很多动画属性,CSS让我更容易)

我的想法是制作一个图像,以便在他们飞走的时候分解成可以缩小的小部分.

我已经设法用几个CSS动画 - scale+ translate3d- (结果不是很好,但它是一个开始).

现在,问题是我希望翻译是随机的.据我所知,有一个简单的方法涉及JS/Jquery/GSAP,以及一个涉及SCSS/Sass的更复杂的方法......

我不熟悉所有这些.

我找到了一个使用javascript随机化旋转的代码,我已将其改编为我的翻译.

代码在这里作为答案发布.

// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule)
{
    // gather all stylesheets into an array
    var ss = document.styleSheets;

    // loop through the stylesheets
    for (var i = 0; i < ss.length; ++i) {

        // loop through all the rules
        for (var j = 0; j < ss[i].cssRules.length; ++j) {

            // find the -webkit-keyframe rule whose name matches our passed       over parameter …

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

对于上面的动画CSS代码,我想知道是否有任何方法可以从Javascript 传递margin-left和width作为参数的值.

在JavaScript中,很容易获得应用于元素的CSS动画的名称和属性:

var animName = element.style.webkitAnimationName;
// element.style.mozAnimationName
// etc...

但有没有办法读出甚至更改动画的CSS关键帧？

我有一个完全用 CSS 动画构建的无尽滑块，我希望能够使用 javascript（onlcick 和键盘输入）操纵动画。我希望能够从一帧快速运行动画，即加速它......到另一帧以在按下指向滑块中特定图像的按钮时产生跳跃效果。另外，我希望能够通过键盘输入逐步完成动画...（ --> ， <-- ）

有谁知道如何实现这一目标？

在点击..

1. 检索当前关键帧位置；
2. 为目的地设定适当的方向；
3. 大大提高动画速度，直到达到所需的关键帧；
4. 暂停动画或从新点继续

键盘输入…

1. 跳转到特定的关键帧并继续动画

我正在尝试创建一个操作，在其中创建一个 div 并立即“向上浮动”，直到它离开屏幕。

为了实现这一点，我正在尝试使用 CSS transition，它将完全由 JavaScript 驱动（由于我的用例的限制）。

当我创建一个元素，为其分配过渡样式属性，然后立即尝试通过进行样式更改 ( top)来启动过渡时，会出现问题。

看起来像是发生了时间问题，top样式更改在转换可用之前触发，因此只需立即将我的 div 移出屏幕，而不是实际执行转换。

这是一个简化的示例：

var
    defaultHeight = 50,
    iCount = 0,
    aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

function createBlock() {
    var testdiv = document.createElement('div');
    testdiv.className = 'testdiv';
    document.body.appendChild(testdiv);
    testdiv.style.left = '50%';
    testdiv.style.backgroundColor = aColors[iCount % aColors.length];
    testdiv.style.width = defaultHeight + 'px';
    testdiv.style.height = defaultHeight + 'px';
    testdiv.style.fontSize = '30px';
    testdiv.style.textAlign = 'center';
    testdiv.innerHTML = iCount;
    testdiv.style.top = '500px';
    testdiv.style.position = 'absolute';
    iCount++;
    return …

我有一个CSS关键帧动画，它本身非常普通。但是，我希望能够强制动画处于特定帧。 类似的东西anim.setProgress(0.13)，它将动画设置为13％。 我怎样才能做到这一点？

请注意，我不只是想在任意点开始动画。我希望能够中断它并说“回到32％”之类的值，而不管动画沿多远。