在HTML中创建动画
1、Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
2、当我们在 @keyframes 中创建动画时，要捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
(1)规定动画的名称(2)规定动画的时长
3、注释：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
4、动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，一般应该始终定义 0% 和 100% 选择器。
5、animation 属性是一个简写属性，用于设置六个动画属性：①animation-name ②animation-duration ③animation-timing-function ④animation-delay ⑤animation-iteration-count⑥animation-direction
6、animation语法：animation：name duration timing-function delay iteration-count direction
name:选择需要绑定到选择器的@keyframe名称
duration：规定完成动画所花费的时间，以秒或毫秒记
timing-function：规定动画的速度曲线(linear为线性的，从头到尾的速度是相同的；ease为默认值，动画以低速开始，然后加快，在结束前变慢；ease-in:动画以低速开始；ease-out：动画以高速开始；ease-in-out:动画以低速开始和结束；cubic-bezier(n,n,n,n):在cubic-zezier函数中的值，可能是从0到1之间的值)
delay:规定在动画开始之前的延时
iteration-count:规定动画应该播放的次数(n为定义的播放的次数；infinite为无限循环播放)
direction：规定是否该轮流反向播放动画(normal为默认值，正常播放；alternate为轮流反向播放)
7、实例：一颗跳动的心，在鼠标移到这颗心上的时候，心的大小发生变化，用scale(n)来表示放大多少倍，可以取负值
哈哈
<!DOCTYPE html>
<html>
<head>
<title>跳动的心</title>
<meta charset="utf-8" />
<style type="text/css">
#heart {
position: relative;
top: 60px;
left:50px;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
}
#heart:hover{<pre name="code" class="html" style="line-height: 18px;"> <!-- 用animation定义动画的名称为haha--> -webkit-animation:haha 0.6s linear infinite; }
<!-- 用@keyframes定义动画效果，-WebKit为规定为在谷歌中运行有效-->@-webkit-keyframes haha{ 100% {-webkit-transform:scale(-1.5);} } }</style></head><body><div id="heart"></div></body></html>