CSS3动画:继承0%处关键帧的属性

Question

我有以下问题：我想使用带有关键帧规则的CSS3动画（@keyframes myname｛｝）

问题是，我想在多个元素的规则关键帧动画中使用SINGLE，但这些元素每个都有不同的位置。因此，@keyframes动画应该在0%（或从｛｝）规则继承选择器的原始属性，因此动画将起源于选择器的原始位置和大小。

像这个：

@keyframes myanim {
  0% {
    left: inherit;
    top: inherit;
width:inherit;
height:inherit;
  }
  100% {
top: 50%;
left:50%;
    width: 100%;
    height: 60%;
  }
}

和选择器：

.myselector-one {
top:10em;
left:0em;
width:10em;
height:5em;
animation: myanim 1s;
}
.myselector-two {
top:20em;
left:30em;
width: 15em;
height: 8em;
animation: myanim 1s;
}

目标是获得每个选择器的原始属性，将它们设置为0%关键帧作为原始位置和大小，并使用每个选择器的相同属性设置为100%动画。

这可能吗？或者我必须为每个选择器创建动画？问题是，我不知道他们的位置，因为它将是动态计算的。

请，没有jQuery解决方案，只有纯CSS3解决方案！我不想使用jQuery动画方法。

Answer 1

嗯，我已经研究这个问题有一段时间了，我认为使用CSS动画是不可能的。我已经尝试了这个JSFiddle很多不同的东西，并运行了关于CSS动画的教程（看看是否有人提到了同样的问题）以及其他有关它的信息

然后我意识到你正在努力实现的目标，我认为也许有一个更简单的解决方案。如果位置是动态计算的，我认为您确实使用了某种级别的Javascript（或某种疯狂的高级CSS计算方法），所以我至少认为您将使用新的left或top位置来设置DOM元素的样式。虽然我不是在谈论jQuery动画，但您可以将CSS3 Transitions与Javascript结合使用。这意味着你可以获得CSS动画的一些好处，比如计算更原生（硬件加速），而不是在Javascript中完成，但你确实失去了一些东西。

最重要的是，浏览器没有像CSS动画那样的转换事件，也不能对关键帧进行精细的控制，但你可以动态地使用它。我只是建议它，因为你的问题只涉及0%和100%的一个关键帧。

您试图做的事情的问题是，使用CSS动画需要是静态的，并且不会拉取当前设置为执行动画的值（与过渡不同）。当您使用inherit时，实际上是在尝试让它使用其父级的top和left等。

同样，这不能满足纯CSS的要求，但使用CSS Transitions意味着只能通过Javascript进行有限的DOM操作，而不是像jQuery animate那样。

这里是另一个没有使用jQuery（只有非常基本的javascript来设置类或内联样式）和CSS转换的JSFiddle。

HTML

<div class="myselector-one" id="a">Click Me</div>
<div class="myselector-two" id="b">Click Me</div>

Javascript

document.getElementById("a").onclick = function()
{
    if (this.className.indexOf("animate-complete")!=-1)
    {
        this.className = this.className.replace(/animate-complete/g,"");
    }
    else
    {
        this.className += " animate-complete";
    }
}
var bIsTransitioned = false;
document.getElementById("b").onclick = function()
{
    if (!bIsTransitioned)
    {
        this.style.top = "50%";
        this.style.left = "50%";
        this.style.width = "100%";
        this.style.height = "60%";
    }
    else
    {
        this.style.top = "";
        this.style.left = "";
        this.style.width = "";
        this.style.height = "";        
    }
    bIsTransitioned = !bIsTransitioned;
}

CSS

.myselector-one {
    top:10em;
    left:0em;
    width:10em;
    height:5em;
    transition:all 2s;
    background-color:#ffaa99;
    position:absolute;
}
.myselector-two {
    top:4em;
    left:30em;
    width: 15em;
    height: 8em;
    transition:all 2s;
    background-color:#aaff99;
    position:absolute;
}
.animate-complete
{
    top: 50%;
    left:50%;
    width: 100%;
    height: 60%;
}

Answer 2

任何登陆此线程的人的更新。根据MDN，从选择器中省略0%/将具有所需的行为。https://developer.mozilla.org/en-US/docs/Web/CSS/@关键帧

有效的关键帧列表如果关键帧规则没有指定开始或动画的结束状态（即0%/from和100%/to），浏览器将使用元素的现有样式作为开始/结束状态。这可以用于从元素的初始状态设置动画并返回。