详细参考 ：
http://www.w3school.com.cn/css3/css3_animation.asp
<!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">
.orgClass{
width:500px;height:80px;background:red;
margin-top:500px;
}
.animateClass {
width:500px;height:80px;background:red;
-webkit-animation-name: cssAnimation;/*绑定的css动画*/
-webkit-animation-duration:3s;/*执行时间*/
-webkit-animation-iteration-count: 1;/*播放次数,默认1*/
-webkit-animation-timing-function: ease;/*规定动画的速度曲线。默认是 "ease"。*/
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
margin-top:500px;
}
to {
margin-top:0px;
}
}
</style>
</head>
<script type="text/javascript">
function ani(){
//开始
document.getElementById('ddd').className ='animateClass';
//3秒后移除
setTimeout(function(){
document.getElementById('ddd').className ='orgClass';
},3000);
}
</script>
<body>
<input name="" type="button" onclick="ani()" />
<div id="ddd" class="orgClass" width="328" height="328" ></div>
</body>
</html>
相关推荐
在网页设计领域，CSS3（Cascading Style Sheets Level 3）引入了一种全新的动态效果——CSS3 Animation，它允许开发者通过纯CSS方式创建丰富的视觉动画，而无需依赖JavaScript或其他插件。这篇教程将深入探讨CSS3 ...
本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作（如点击按钮）而触发时。我们将通过具体的示例来一步步解释其实现原理...
接下来，我们将详细探讨CSS3和jQuery在动画处理中的应用以及如何实现元素视口动画。 **CSS3动画基础** CSS3是CSS的最新版本，它引入了许多强大的新特性，其中最引人注目的是动画功能。CSS3动画通过`@keyframes`...
一个有趣的动画效果，用 JavaScript 配合 CSS3 实现让图片爆炸的动画。 Usage <!-- style --> <link rel="stylesheet" type="text/css" href="Boom.css" /> <!-- scripts --> <script src="jquery.js"></script> <!-...
jQuery响应式css3动画相册，可全屏查看，css3动画展现，支持键盘方向键翻页，效果优美简洁。兼容主流浏览器， 使用方法： 1、head区域引用文件 htmldivcss.css, plugins.js, jquery.min.js, scripts.js 2、在文件中...
在压缩包文件的“H5-CSS3-TOM动画”中，可能包含了HTML文件（如index.html）来定义页面结构，CSS文件（如styles.css）来编写样式和动画，以及可能的JavaScript文件（如script.js）来处理交互逻辑。HTML文件会使用`...
"css-doodle.js螺旋状动画特效.zip" 文件提供了一个利用CSS3和一个名为css-doodle.js的JavaScript库创建的独特视觉效果：旋转的圆点线条螺旋体动画。 首先，我们要理解css-doodle.js库。这是一个轻量级的JavaScript...
本篇将详细讲解如何使用CSS3来实现一个炫酷的“colorful”按钮，以及在JavaScript中添加交互性的动画效果。 首先，CSS3为创建具有丰富视觉效果的按钮提供了许多工具，如渐变、阴影、边框半径、过渡和动画。在"css3-...
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 使用方法： 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可 3、末尾调用...
在这个“css3制作穿越云层开场动画，css3+js”的项目中，我们将深入探讨如何利用CSS3的动画特性以及JavaScript来创建一个引人入胜的开场场景，让用户仿佛穿越云层般体验。 首先，我们需要理解CSS3的关键帧动画（@...
在提供的DEMO中，可能包含了多种弹出窗口的实现方式，如使用JavaScript与CSS3结合，或者纯CSS3实现。每种DEMO可能利用不同的技术栈，例如监听事件触发弹出，使用伪类（如`:hover`）来响应鼠标操作，或者利用CSS3的`...
CSS3则为网页设计提供了更多的样式控制和动画效果，包括媒体查询、过渡、动画和2D/3D变换等。JavaScript则是负责网页动态行为的关键，它允许开发者实现用户交互、数据异步传输以及对DOM（文档对象模型）的操作。 在...
在CSS中，为这些元素添加动画效果，并定义它们的初始位置和大小，以及随机的颜色： ```css .firework { position: absolute; width: 1px; height: 1px; background: rgba(255, 255, 255, 0.9); animation: ...
JavaScript通常用于处理用户交互、动态更新内容以及控制动画的时间轴。在这个案例中，JavaScript可能负责初始化动画、响应用户的交互事件，或者调整动画的运行状态。同时，CSS3的3D变换使得小球具有立体感，落地和...
总的来说，"js+css3文字上下滚动切换动画特效"是一个结合了前端两种核心技术的实践案例，展示了如何通过JavaScript的动态控制与CSS3的动画效果，创造出引人注目的网页交互体验。无论是用于网站标题、通知栏还是其他...
虽然纯CSS可以实现大部分的3D动画效果，但在某些复杂交互或精确控制时，JavaScript（如jQuery或Vue.js）的介入可以使效果更加灵活和精确，例如，通过事件监听来触发动画，或者根据用户行为动态改变动画参数。...
4. **JavaScript 与 CSS3 的配合**：jQuery 能够动态修改元素的CSS样式，从而触发CSS3的3D变换和动画。例如，当用户点击下一张按钮时，JavaScript会更新图片的`transform`属性，CSS3则根据这些属性计算并渲染出对应...
5. 动画：CSS3的`animation`属性允许开发者定义自定义的动画序列，通过`@keyframes`规则定义动画的起始和结束状态，以及中间各个阶段的变化。结合`animation-duration`, `animation-timing-function`, `animation-...
在本压缩包“CSS3雷达波向外散发动画效果.zip”中，包含的是一个纯CSS3实现的雷达波动画效果，无需JavaScript参与。这个效果能够为网页增添动态感和科技感，尤其适用于导航指示、加载提示或者游戏界面等场景。接下来...
总的来说，"纯css3炫酷粒子动画特效"展示了CSS3的强大能力，以及如何通过组合使用动画、转换、预处理器和可能的JavaScript来创建引人注目的网页互动元素。对于前端开发者来说，掌握这些技术是提升网页设计和用户体验...