css3的animation支持动画 ，以前用过transform、transition感觉很酷 ，这个animation 感觉很强大。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animation</title>
<style type="text/css">
.animation
{
width:50px;
height:50px;
border:1px solid black;
-moz-animation-name:animate;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-webkit-animation-name:animate;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
@-moz-keyframes animate{
from{
background:red;
}
to{
background:blue;
}
}
@-webkit-keyframes animate{
from{
background:red;
}
to{
background:blue;
}
}
#sprite {
width:64px;
height:64px;
background:url(lemmings-walker-sprites.png) 0 0;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:step-start;
-webkit-animation-name:animate01;
-moz-animation-duration:1s ;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:step-start;
-moz-animation-name:animate01;
}
@-webkit-keyframes animate01 {
0% { background-position: 0px 0; }
12.5% { background-position:448px 0; }
25% { background-position:384px 0; }
37.5% { background-position:320px 0; }
50% { background-position:256px 0; }
62.5% { background-position:192px 0; }
75% { background-position:128px 0; }
87.5% { background-position: 64px 0; }
100% { background-position: 0px 0; }
}
@-moz-keyframes animate01 {
0% { background-position: 0px 0; }
12.5% { background-position:448px 0; }
25% { background-position:384px 0; }
37.5% { background-position:320px 0; }
50% { background-position:256px 0; }
62.5% { background-position:192px 0; }
75% { background-position:128px 0; }
87.5% { background-position: 64px 0; }
100% { background-position: 0px 0; }
}
</style>
</head>
<body>
<div class="animation"></div><br />
<div id="sprite"></div>
</body>
</html>
可惜目前支持的浏览器还比较少 firefox5.0和以上支持，webkit的支持最佳，opera暂时没支持，IE10才会支持
参考：http://caniuse.com/css-animation
学习文档：
http://www.w3.org/TR/css3-animations/
http://chrismar.sh/2011/07/19/animating-sprites-using-css/
- 大小: 185.1 KB
分享到：
相关推荐
3. **animation-timing-function**: 描述动画的速度曲线，例如`ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out`等。 4. **animation-delay**: 指定在开始前等待多长时间。 5. **animation-iteration-count...
- `animation-fill-mode`: 定义动画结束后元素应处于哪个状态，如 `forwards` 保持在最后一个关键帧状态。 另外，由于浏览器兼容性问题，通常需要使用前缀 `-webkit-`, `-moz-`, `-o-` 来确保动画在各大浏览器中...
Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。...3.自主打造npm install -g vue-cli git clone https://github.com/vace/css3-animation-generator cd css3-animation-generator && npm i
【标题】"CSS3 Animation Menu" 是一个基于HTML5和CSS3技术实现的动态二级菜单。这个项目展示了如何利用这两种现代Web技术来创建一个交互性强、视觉效果吸引人的导航菜单。 【HTML5】是HTML的最新版本，它引入了...
- `animation-timing-function`: 描述动画的速度曲线，例如匀速（linear）、加速（ease-in）、减速（ease-out）或先加速后减速（ease-in-out）。 - `animation-delay`: 设置动画开始前的延迟时间。 - `animation-...
"css3-animation-mock" 是一个针对 CSS3 动画进行模拟实践的项目，旨在帮助开发者更深入地理解和运用 CSS3 动画技术。 1. **CSS3 动画基础** CSS3 动画是通过 `@keyframes` 规则定义的一系列样式变化，这些变化会...
【标题】：“CSS3 Girl Swinging Animation” 在Web开发领域，CSS3（Cascading Style Sheets Level 3）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。这个“css3-girl-swinging-...
标题 "css3-hover-animation-button.zip" 暗示了这个压缩包内容主要涉及CSS3技术，特别是关于按钮的悬停效果和动画。CSS3是层叠样式表（Cascading Style Sheets）的第三版，引入了许多新特性，使得网页设计更加丰富...
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作...
`animation`属性是CSS3 Animation的核心，它是一个复合属性，可以包含多个子属性，如`animation-name`、`animation-duration`、`animation-timing-function`等。以下是一个完整的`animation`声明示例： ```css div ...
CSS动画，或者称为CSS Animation 101，是前端开发中的一个重要概念，它允许开发者为网页元素添加动态效果，从而提升用户体验，使网站更加生动有趣。 首先，我们来看一下为什么要使用CSS动画。动画不仅仅是视觉上的...
为了应用动画，我们需要设置`animation`属性，它包括多个子属性，如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`等。例如： ```css .element { animation-name: ...
4. **代码结构**：项目文件夹“font-awesome-animation-master”很可能包含一个或多个HTML文件，用于演示动画效果，以及一个CSS文件，包含了所有动画的CSS代码。开发者可能还使用了SCSS（Sass）或LESS预处理器来编写...
create-keyframe-animation, 在带有JavaScript的浏览器中，动态生成CSS关键帧动画 create-keyframe-animation使用JavaScript在浏览器中动态生成CSS关键帧动画。你用JS描述它们，它在文档 <head> 中生成并插入...
在本文中，我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，...
3. `animation-timing-function`: 控制动画的速度曲线，可以是预定义值（如`ease`, `linear`等）或自定义函数。用于模拟不同的运动效果，如弹跳感： ```css animation-timing-function: cubic-bezier(0.25, 0.1, ...
- **动画属性（animation）**：包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction等，它们共同决定了动画的播放方式。...