Jquery 如何在使用css3单击类或id时设置动画？_Jquery_Css

Jquery 如何在使用css3单击类或id时设置动画？

jquery css

Jquery 如何在使用css3单击类或id时设置动画？,jquery,css,Jquery,Css,我正在学习css3，现在我可以在窗口打开时运行动画，但是我需要如果我单击任何类或id，那么只有它会动画，请任何人帮助我 <html> <div id="test" class="target animate">Try me</div> <div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click

我正在学习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>


试试我
点击这里
#试验{
宽度：160px；
高度：200px；
利润率：100像素；
背景：#68C6F2；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}
#测试动画{
-moz动画名称：test；
-moz动画持续时间：1s；
}
@关键帧测试{
来自{moz变换：translateX（-100%）比例（.1）rotateY（-50度）；}
}

我正在使用firefox浏览器，很好地完成了这项工作，但我需要，如果我单击任何类或id，那么它只会显示动画，请任何人帮助我（或者你可以告诉我，像使用jquery一样，它将对我非常有帮助）谢谢

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

我认为创建动态的@关键帧并不容易，因为它们必须是硬编码的，所以不灵活。

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

但是，CSS转换所能提供的复杂性非常有限-具有多个步骤的动画很难实现。

这是CSS@keyframe动画想要解决的问题，但它们没有提供过渡所需的动态响应级别。

但是这些链接可能会帮助你
：一种生成@-webkit关键帧动画的工具，其中包含许多小步骤。这打开了一扇无限选择宽松公式的大门
这可能非常有用
将其作为基础将对您有很大帮助，因为它提供了一个UI来创建动画并将其导出到CSS代码

我想，**这个解决方案肯定会对您有用。它用于动态关键帧
是否希望对象在运行时设置动画？