Question

我正在学习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它将对我非常有帮助）谢谢

Answer 1

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

我认为创建动态 @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关键帧动画的工具。这为无限选择的宽松配方打开了大门。

Link2 这可能非常有用。

Link3 以它为基础将是一个很好的帮助，因为它提供了一个UI来创建动画并将其导出到CSS代码。

我猜 ** this 解决方案绝对适合您。它用于动态关键帧

如何使用css3点击类或id时动画？

1 个答案: