7

我有以下问题：我想使用带有关键帧规则的 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 动画方法。

4

2 回答 2

2

嗯，我一直在研究这个问题一段时间，我认为使用 CSS 动画是不可能的。我一直在尝试使用这个 JSFiddle做很多不同的事情，并浏览有关 CSS 动画的教程 （看看是否有人提到了同样的问题）以及有关它的其他信息。

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

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

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

同样，这不符合您对纯 CSS 的要求，但使用 CSS 转换确实意味着仅通过 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%;
}
于 2013-08-05T11:21:11.860 回答
1

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

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

于 2019-12-31T16:26:16.157 回答