0

我正在学习 css3 现在我可以在打开窗口的情况下运行动画，但是如果我单击任何类或 ID，我需要它，那么只有它会动画，请任何人帮助我

<html>

        <div id="test"  class="target animate">Try me</div>

            <div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click here</h3></div>




            <style>


            #test {
                width:160px;
                height:200px;
                margin: 100px;
                background:#68C6F2;

                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;    
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;    
                transition: all 1s ease-in-out;
            }

            #test.animate {
                -moz-animation-name: test;
                -moz-animation-duration: 1s;
            }

            @keyframes test{
                from { -moz-transform: translateX(-100%) scale(.1) rotateY(-50deg);}
            }

            </style>
</html>

我正在使用 firefox 浏览器，可以很好地工作，但是如果我单击任何类或 id，我需要它才会动画，请任何人帮助我（或者你可以告诉我喜欢使用 jquery 这对我很有帮助）谢谢

4

1 回答 1

0

我也为其他人回答过这个问题。我想你的问题也一样。

好吧，我认为创建动态并不容易@keyframes they are inflexible because they must be hard-coded.

过渡更容易使用，因为它们可以优雅地响应 JavaScript 执行的任何 CSS 更改。

然而，CSS 过渡能给你带来的复杂性非常有限——an animation with multiple steps is difficult to achieve.

这是 CSS @keyframe 动画旨在解决的问题，but they don’t offer the level of dynamic responsiveness that transitions do.

但这些链接可能会对您有所帮助

Link1 ：一个生成带有许多小步骤的@-webkit-keyframe 动画的工具。这为无限选择缓动公式打开了大门。

Link2这可能非常有用。

Link3将它作为基础将对您有很大帮助，因为它提供了一个 UI 来创建动画并将其导出为 CSS 代码。

我猜**这个 解决方案肯定对你有用。它用于动态关键帧

于 2013-09-26T10:33:24.043 回答