要定义动画，你必须先从@keyframes规则。一个@keyframe规则包含关键字“@keyframes“，后面跟着一个标识符为动画（将使用引用给名字animation-name），然后是一组样式规则（由大括号分隔）。动画然后，通过使用标识符作为一个值施加到元件animation-name特性。例如：
/*定义动画*/
@keyframes your-animation-name {
/* 样式规则 */
}
/* 把它应用到一个元素 */
.element {
animation-name: your-animation-name;
animation: your-animation-name 1s ...
}大括号内，您可以定义关键帧，一个简单的动画@keyframe可能是这样的：
@keyframes change-bg-color {
0% {
background-color: red;
}
100%{
background-color: blue;
}
}上述动画是类似于简单的过渡效果：背景颜色从一个值在动画（0％），直到它到达在动画（100％）的端部的另一个值的开头动画。当然还可以使用的选择器的关键字
form和to代替使用0％和100％，因为它们是效果等价的。
@keyframes change-bg-color {
from {
background-color: red;
}
to {
background-color: blue;
}
}关键帧规则：
桌面
谷歌浏览器 - 4*
Mozilla Firefox浏览器 - 5*
IE浏览器 - 10
Opera浏览器 - 12*
Safari浏览器 4*
手机/平板电脑
iOS的Safari浏览器 3.2*
Android 浏览器 - 部分支持 2.1*
Opera 12.
谷歌浏览器 54
Firefox浏览器 50
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
@keyframes change-bg-color
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes change-bg-color / Firefox /
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes change-bg-color / Safari 和 Chrome /
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes change-bg-color/ Opera /
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
把 "change-bg-color" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: change-bg-color 5s;
-moz-animation: change-bg-color 5s; / Firefox /
-webkit-animation: change-bg-color 5s; / Safari 和 Chrome /
-o-animation: change-bg-color 5s; / Opera /
}
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
CSS3 动画属性
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。（infinite：无限次） | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
transform: 动画变形
transparent：透明色
transition：过度
translate：位移定义一个 div，执行 360 度转圈，如下：
<body>
<div class="box test"><img src="img/call.png"/></div>
</body>
/定义关键帧/
@keyframes r{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.box{width:120px;height:120px;background:red;
text-align: center;
line-height: 120px;
color: #fff;
border-radius: 50%;//设置圆形
animation: r 2s infinite linear;//转圈
}
.box img{width:100%;height: 100%;border-radius: 50%;}
效果图：
定义关键帧移动动画：
<body>
<div class="box a1 "><img src="img/call.png"/></div>
<div class="box a2 "><img src="img/call.png"/></div>
<div class="box a3 "><img src="img/call.png"/></div>
</body>
样式：
@keyframes move{
0%{left:0}
50%{left:500px}
0%{left:0}
50%{left:500px}
100%{left:1000px;}
}
.box{width:120px;height:120px;background:red;
text-align: center;
line-height: 120px;
color: #fff;
border-radius: 50%;
position:relative;
}
.a1{animation: move 3s ease infinite alternate;}
.a2{animation: move 3s ease infinite alternate 1s;}
.a3{animation: move 3s ease infinite alternate 2s;}
.box img{width:100%;height: 100%;border-radius: 50%;}
.box:hover{
animation-play-state: paused;
}
效果如图：
利用关键帧做视频弹幕效果，先定义弹幕区域：
<input type="text" id="msg" value="请输入评论内容" style="width: 240px;height:35px;">
<button onclick="saveMessage(this)">追加评论</button>
<!--漂浮的位置-->
<div id="videobox"></div>
<button onclick="start(this)">开启弹幕</button>
定义样式及动画：
<style type="text/css">
*{padding:0;margin:0;}
a{text-decoration: none;color:#333;}
body{font-family: "微软雅黑";font-size: 14px;}
.items{display: inline-block;background:#333;padding: 10px 20px;color: #fff;border-radius:20px;
position:absolute;
top:50px;
left:0px;
animation: move 5s linear infinite alternate both;
}
@keyframes move{
from{left:-100px;}
10%{background:rgba(0,0,0,0.4)}
50%{background:rgba(0,0,0,0.12)}
70%{background:rgba(0,0,0,0.1)}
to{left:960px;background:rgba(0,0,0,0)}
}
#videobox{width:960px;height:460px;background:#333;margin:0 auto;position: relative;
overflow: hidden;
}
</style>
<script type="text/javascript">
//次数组用来记录待会要元素如果到了尾部的元素把删除
var arr = [];
var vdom = document.getElementById("videobox");
var iheight = 40;//高度
var mt = 10;//间隙
//飘窗的高度
var vheight = vdom.offsetHeight;
//漂浮的位置放的行数
var rows = Math.floor(vheight / (iheight+mt));
var danMuArr = [];
var dtimer = null;
//开启弹幕
function start(){
//伪造弹幕列表
for (var i = 0; i < 20; i++) {
danMuArr.push("内容"+i);
}
clearInterval(dtimer);
dtimer = setInterval(function(){
playDanMu2();
},17);
};
//追加评论
function saveMessage(){
//如果有新的内容加入，重新激活弹幕
playDanmu3();
};
var index = 0;
//播放弹幕，我想着要从弹幕列表中取 rows 条放入到
function playDanmu3(){
index++;
var msg = document.getElementById("msg").value;
//创建元素
var divDom = document.createElement("div");
//添加 class
divDom.className = "items";
//设定一点延时，延时目的，主要是让每个元素错开，因为不设定那么时间都一直，一起运动，可以注释看效果
//加延时的目的：主要是产生时间差
divDom.style.animationDelay = Math.random()+"s";
//文本内容
divDom.innerHTML= msg;
//计算每个 div 小元素的 top 距离
divDom.style.top = (iheight +mt)*(index%rows)+"px" ;
//追加到飘窗中
vdom.appendChild(divDom);
//追加到数组
arr.push(divDom);
};
function playDanMu2(){
playDanmu();
};
//播放弹幕，我想着要从弹幕列表中取 rows 条放入到
function playDanmu(){
for(var i=0;i<danMuArr.length;i++){
//创建元素
var divDom = document.createElement("div");
//添加 class
divDom.className = "items";
//设定一点延时，延时目的，主要是让每个元素错开，因为不设定那么时间都一直，一起运动，可以注释看效果
//加延时的目的：主要是产生时间差
divDom.style.animationDelay = Math.random()+"s";
//文本内容
divDom.innerHTML= danMuArr[i];
//计算每个 div 小元素的 top 距离
divDom.style.top = (iheight +mt)*(i%rows)+"px" ;
//追加到飘窗中
vdom.appendChild(divDom);
//追加到数组
arr.push(divDom);
danMuArr.splice(i,1);
}
};
var timer = setInterval(function(){
for (var i = 0; i < arr.length; i++) {
if(arr[i].offsetLeft+arr[i].offsetWidth+50 >= vdom.offsetWidth){//div.offsetWidth
vdom.removeChild(arr[i]);
arr.splice(i,1);
}
}
},100);
</script>
效果图：
当点击开启弹幕时，会模拟 20 条数据加载在上面，点击追加评论时会将刚刚输入的内容显示在屏幕中。如图
是不时很简单呢。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于