我正在学习 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 它对我很有帮助)谢谢
最佳答案
我也替别人回答过这个问题。我想你的问题也是一样的。
好吧，我认为创建动态 @keyframes 并不容易，因为它们必须硬编码。
转换更容易使用，因为它们可以优雅地响应 JavaScript 执行的任何 CSS 更改。
但是，CSS 过渡可以给您带来的复杂性非常有限 — 很难实现具有多个步骤的动画。
这是 CSS @keyframe 动画旨在解决的问题，但它们不提供过渡所提供的动态响应级别。
但是这些链接可能对你有帮助
Link1 : 一个生成带有许多小步骤的@-webkit-keyframe 动画的工具。这为无限选择宽松公式打开了大门。
Link2 这可能非常有用。
Link3 以它为基础将对您有很大的帮助，因为它提供了一个 UI 来创建动画并将其导出为 CSS 代码。
我想** this 解决方案绝对适合您。它用于动态关键帧
关于jquery - 使用 css3 单击类或 id 时如何设置动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19025723/