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动画不可能。我一直在尝试使用this JSFiddle许多不同的内容并运行through tutorials about CSS Animations（看是否有人提到相同的问题）以及other information about it。

然后，我确实意识到你要完成的任务，我想也许有一个更容易的解决方案。如果位置是动态计算的，我会假设您确实使用某种级别的Javascript（或者一些疯狂的高级CSS计算方法），所以我至少会认为您将使用新的{{1}设置DOM元素的样式}或left职位。虽然我不是在谈论jQuery动画，但你可以做的是将CSS3 Transitions与Javascript结合使用。这意味着你可以获得CSS动画的一些好处，比如计算更加本机化（硬件加速），而不是在Javascript中完成，但你确实失去了一些东西。

最重要的是，浏览器like there is for CSS Animations没有转换事件，也不能对关键帧进行细粒度控制，但您可以动态地使用它。我只是建议它，因为您的问题只涉及top和0%之一的关键帧。

您尝试做的问题是使用CSS动画需要是静态的，并且不会拉取当前设置为动画的值（与转换不同）。当您使用100%时，实际上是在尝试使用inherit和top等from it's parent。

同样，这不符合您对纯CSS的要求，但使用CSS Transitions确实意味着仅通过Javascript进行有限的DOM操作，而不是jQuery animate所做的。

这里是another JSFiddle不使用jQuery（只有非常基本的javascript来设置类或内联样式）和CSS Transitions。

<强> HTML

left

<强>的Javascript

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

<强> CSS

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;
}

Answer 2

针对任何使用此线程的人的更新。根据MDN，省略选择器中的0％/将具有所需的行为。 https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

有效的关键帧列表 如果关键帧规则未指定开始或动画的结束状态（即0％/ from和100％/ to），浏览器将使用元素的现有样式作为开始/结束状态。这个可用于从元素的初始状态开始对其进行动画处理。

CSS3动画：继承关键帧的属性为0％

2 个答案: