keyframes被称为关键帧，类似于flash中的关键帧。在Css3中主要以@keyframes坐开头，后面接着是动画名称+{}，“{}“中就是不同时间段的样式规则了。当然之前要对transition有一丢丢了解的最好。语法例如：
@keyframes changecolor{
0%{background:red;}
100{background:blue;}
}
@keyframes中的规则可以是多个百分比，在0%~100%之间，在每个百分比的花括号内写自己需要的样式，从而达到在不断变化的效果。当然，也可以用关键词from，to代替，0%对应from,100%对应to,也就是”从“一个效果”到“另一效果，这个还是比较好理解的。
浏览器支持情况W3C给出这样：
慕课上的简单demo:鼠标悬浮时有弹动效果（自己有调整一下）
style.css:
@keyframes wobble {
0% { margin-left: 100px; background:green; }
40% { margin-left:150px; background:orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}
div { margin-left: 100px; width: 100px; height: 100px; background:red; color: #fff; }
div:hover{ animation: wobble 5s ease .1s; }
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>鼠标放在我身上 </div>
</body>
</html>
鼠标放在我身上
W3C中关于keyframes的效果与代码：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。