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

Question

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

举个例子

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

    to {
        width:50%;
    }
}

是否可以通过执行类似操作来更改关键帧的"to"部分中的width属性

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

目前我只是在页面上动态创建一个完整的样式表,以便自定义关键帧.

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

Answer 1

以下是使用 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 2

不,因为动画没有在元素中声明,所以它只被调用.这就像尝试将方法添加到对象而不是类中.不可能,对不起;)

Answer 3

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

<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 4

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