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动画方法。

我有以下问题：我想将CSS3动画与关键帧规则一起使用（@keyframes myname {}），问题是，我想对多个元素使用SINGLE规则关键帧动画，但是这些元素...

Answer 1

嗯，我已经研究了一段时间，但我认为使用CSS动画是不可能的。我一直在尝试this JSFiddle许多不同的事情，并运行through tutorials about CSS Animations（看看是否有人提到相同的问题）以及other information about it。

Answer 2

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