相关属性：
@keyframes规则：定义动画
语法：@keyframes animationname{keyframes-selector {CSS-style;}}
animationname:动画名称
keyframes-selector:动画持续百分比（0%~100%) from(表示0%） to(表示100%)
CSS-style:要设置的样式；
如定义一个名称为myanimation的动画:
@keyframes myanimation{
0% {font-size:10px;}
50% {font-size:30px;}
100% {font-size:100px;}}
animation属性：是以下属性的复合
animation-name:动画的名称
animation-duration:动画完成时间
aniamtion-timing-function:动画速度设置（linar/ease/ease-in/ease-out/ease-in-out)
animation-delay:动画在启动前的延迟间隔
animation-iteration-count:播放次数(n/infinite)
animation-direction:动画播放方向（normal/reverse
<!doctype html> <html> <head> <meta charset="utf-8" /> <style> div{ width:400px; height:400px; background-color:grey; } p{ color:red; animation:myanimation 10s infinite; } @keyframes myanimation{ 0% {font-size:10px;} 50% {font-size:30px;} 100% {font-size:100px;} } </style> </head> <body> <div> <p>this is an animation</p> </div> </body> </html>