CSS动画onClick
如何获得CSS动画和JavaScript onClick一起玩？我目前有：
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}
如何申请onClick？
问题答案：
您确定只在Webkit上显示页面吗？这是通过野生动物园传递的代码。(id='img')单击按钮后图像将旋转。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}
</style>
<script type="text/javascript">
function ani(){
document.getElementById('img').className ='classname';
}
</script>
<title>Untitled Document</title>
</head>
<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>
-
主要内容：@keyframes 规则,animation-name,animation-duration,animation-timing-function,animation-fill-mode,animation-delay,animation-iteration-count,animation-direction,animation-play-state,animation通过《 CSS过渡》一节的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始
-
CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。 你也可以通过 Javascript 控制 CSS 动画，使用少量的代码，就能让动画表现更加出色。 CSS 过渡（transition）[#css-transition] CSS 过渡的理念非常简单，我们只需要定义某一个属性以及如何动态地表现其变化。当属性变化时，浏览器将会绘制出相应的过渡动画。 也就是说：我们只需要改
-
问题内容： 我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。 但这对于我的需求而言有点太先进了，因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行那些CSS滚动，有锚标签？ HTML看起来像这样： 我已经有一些CSS，需要在单击按钮时触发： 问题答案： 您可以使用css3 伪选择器使用锚标记来完成此操作，当与当前URL哈希具
-
我们前面提到过，转换（transitions） 实际上就是一种特殊的CSS动画： 只有两个状态： 起始状态和终止状态 动画不会出现循环 中间状态只能由时变函数（transition-timing-function）来控制 实际动画需求要复杂得多，比如我们可能会需要： 自动播放的动画（不会有交互状态） 控制中间状态 创建循环动画 在同一个HTML元素上应用不同的动画 在动画过程中控制不同的元素属性
-
类似这样，飘忽不定的感觉
-
问题内容： 因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将获得一个不错的动画。 然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单： 可以通过以下过渡来实现此效果： 或者，通过类似这样的动画： 使用HTM