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 动画的教程 （看看是否有人提到相同的问题）以及有关它的其他信息。

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

最重要的是，浏览器没有像 CSS 动画那样的过渡事件，也无法对关键帧进行细粒度控制，但您可以动态地使用它。我只是建议它，因为您的问题仅涉及 的关键帧0%和 之一100%。

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

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

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

超文本标记语言

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