Question

是否可以通过内联调整来更改动画关键帧属性。

以示例为例

@-moz-keyframes slidein {
    from {
        width: 10%;
    }

    to {
        width:50%;
    }
}

是否可以通过执行类似

之类的操作来更改关键帧的“to”部分中的width属性

<div id="someID" style="change keyframe here">

暂时我只是在页面上动态创建一个完整的样式表，以便自定义关键帧。

这种方法有效，但为了简单起见，我宁愿调整内联属性。

Answer 1

没有。由于动画在元素中不是声明，因此它只有名为。这就像尝试将方法添加到对象而不是类中。不可能，抱歉;）

Answer 2

嘿所以让我们思考一下......你可能无法做到这一点......

<div id="someID" style="change keyframe here">

但想想这样做......

<script>
var createdStyleTag = document.createElement("style");
createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+
    "from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+
    "to{ width: 10%; }"+
"}";

document.body.appendChild(createdStyleTag);
</script>

这对你想要做的任何事情都是开放的...你总是会有你要放在元素上的课程，但有时我们不想总是有相同的“从”和“到”所以这可以是一种方式要做到这一点...基本上你动态创建一个样式元素放置任何字符串，最终成为所需的样式文本，然后将其附加到正文...工作得很好...在我自己的框架中使用它...我不是这样做的，但是我这样写出来是为了可见性......为什么这个工作方式很好是因为我的DOM也是动态创建的，所以在实现中它可能更有意义...

没有什么是不可能的......只要在div之外思考

Answer 3

我也在寻找内联关键帧的解决方案。至少对于“到”的价值。 CSS Tricks提供了一个很好的解决方案，只需忘记“to”并将宽度放入内联;） http://css-tricks.com/animate-to-an-inline-style/

Answer 4

这是一种使用 CSS 变量执行此操作的方法：

<div style="--from-width:10px; --to-width:20px; animation:slide 1s ease infinite;"></div>

@keyframes slide {
  from {
    width: var(--from-width);
  }

  to {
    width:var(--to-width);
  }
}

这显然不适用于所有情况，但如果您只需要自定义一组现有关键帧中的一些数字，那么它可能适合您。

Answer 5

这个解决方案听起来很像你可能已经实现的解决方案，但它的解释和思考得非常好： Set Webkit Keyframes Values Using Javascript Variable

Answer 6

正如@Zetura所说，最好的方法是忘记“to”属性，它将采用宽度或高度的默认值或任何你把它放到以我的工作为例：

@keyframes slideInUp {
    0% {
        height: 0px;

    }

}

您可以内联更改CSS3动画关键帧属性（即在HTML样式属性中）吗？

6 个答案: