<html>
<head>
<meta charset='utf-8'>
<title>音乐专辑播放模拟</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="bd">
<div id="musicBox">
<div class="cover rotateCD"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>
从上面的代码可以看出，由于是使用css3强大的动画效果，所以我的结构定义的非常简单（在符合语义的前提下），同时没有引用到javascript脚本文件。
musicBox来限定外围框的大小，内部的cover用来显示专辑封面图片，这个图片是下图左边图片这样的，四四方方，不是圆形，所以我在后面做了个mask的div，它不做其他事情，只是用来容纳一个遮罩（下图右边图片），盖住图片圆形之外的部分。
三、css3样式表
复制代码
代码如下:
@charset utf-8;
/* common: rotateCD */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
100%{
-moz-transform : rotate(360deg);
}
}
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
100%{
-ms-transform : rotate(360deg);
}
}
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
100%{
-o-transform : rotate(360deg);
}
}
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
100%{
transform : rotate(360deg);
}
}
.rotateCD{
-webkit-animation: myrotate 9.5s infinite linear;
-moz-animation: myrotate 9.5s infinite linear;
-ms-animation: myrotate 9.5s infinite linear;
-o-animation: myrotate 9.5s infinite linear;
animation: myrotate 9.5s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
/* module: bd */
#bd{width: 960px;margin: 200px auto 0;}
/* module: musicBox */
#musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;}
#musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;}
#musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}
rotateCD这部分的代码兼容了多种高级浏览器（当然是支持css3的），设置了动画执行的时间和其他一些设置，你可以查询animate的更多知识来深入了解。
对于上面的关于动画关键帧keyframes的写法，踩了比较多的坑，一开始，我是看《HTML5与CSS3权威指南》上的例子，它只写了chrome下的写法（比较坑爹，我猜测估计是作者认为其他浏览器的写法与此类似，所以让读者自己去摸索），我想当然的把其他浏览器的兼容性rotate设置写成了，如下面的代码所示：
复制代码
代码如下:
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
}
....
这样导致的结果就是，chrome和safari下动画正常，FF、opera和IE下均无动画。其实这部分很好理解，myrotate的关键帧只是对webkit做了特殊说明，其他浏览器根本对此置之不理，所以没有动画的效果。
因此，我们在写关键帧适配样式的时候，一定要写成下面的形式：
复制代码
代码如下:
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
...
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
...
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
...
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
...
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
...
opera浏览器还有个比较怪异的地方，它偏爱@keyframes myrotate{...}，而对@-o-keyframes myrotate{...}不感冒，所以你发现两者只存其一的时候，前者可以实现动画，而后者不能实现动画效果。我一直对此很是不解，后来找到关于opera的介绍，说它是严格的执行W3C网页标准。这样想想，就明白了为什么它如此偏爱@keyframes myrotate{...}了。
四、总结
css3看起来非常美好，但是实际使用中还是存在不少的不确定性。如果不能看到已经实现的代码模板，你很难确信自己的代码格式就一定正确。所以你可以到一些不错的网站来观察各种动画效果，选择自己喜欢的动画并生成代码，下载下来后再按照自己的需求来编写动画代码。这样会让你的动画效果实现起来事半功倍（不要担心它达不到你的要求，上面有很多的效果，你可以自己组合，只要你的想象力够丰富）。
好吧，本文到此结束。
PS：文中使用到的浏览器为chrome（21.0.1180.15）、safari5.1.7（7534.57.2）、opera（12.11）、FF（17.0.1）和IE10（10.0.9200.16438）。本回答被提问者采纳
CSS3 animation介绍
最后，引入关键的@keyframes规则，它定义了动画帧，使得动画能够在不同的时间段内执行不同的动作。@keyframes规则通过百分比（如from、to）来划分时间段，并在实体内部创建，从而实现动画效果的精细控制。理解这些CSS3动画属性和规则，是进行高效动画设计的基础。实践和学习他人作品，如Dan Eden的animate.css...
css3动画简介以及动画库animate.css的使用
css3动画大致分为两类：过渡动画和关键帧动画。过渡动画（transition）是元素从一个状态平滑过渡到另一个状态，它通过定义transition-property、duration、timing-function和delay来控制动画效果，例如，让元素在鼠标悬停时宽度从100变到400，颜色从黑到红，历时3秒。改变状态只需为元素添加特定的类。关键帧动...
animate.css库怎么兼容ie8
animate属于CSS3 动画效果目前对IE8的兼容性很差，根本实现不了CSS3的动画特效 所以如果非要实现的话可以考虑使用js来处理
css3的animate怎么给一个css添加两个动画效果
调用动画的时候用逗号隔开即可，animatio:动画1,动画2，这样即可调用。
js控制css3连续动画 重复上一个动画,位置是最后的状态
c3实现你这个需求很麻烦，建议你用JQ的animate:('el').animate({top: "-=20",right:"-=30"}, 600);移不动请检查该元素是否有position：relative。或者自己用js封装一个动画。
css3 两个动画衔接播放
1. 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration )2. 多个动画应用时用逗号分隔开，如下图：
网页点一下就往下滑用什么做的 css3可以吗?
animate用来做动画的，具体怎么用看w3cschool
怎么完全用CSS3使一个的元素做流畅的弧线运动?
例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，...
css3 由小变大然后一直旋转的动画怎么做
; },2000); } 原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
为什么别人做的页面动画都很酷炫流畅?
CSS3出现后，增加了来年各种实现动画的方式：transition和animation，我们先来看看高效强大的CSS3过度动画transition。其实transiton并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画过度，而不是马上改变。在移动端开发中，直接使用transition动画会让页面变慢甚至变卡顿，所以我们通常通过...
