CSS3动画

创建动画的步骤

@keyframes：创建动画（关键帧）
animation：在对应元素上使用动画

@keyframes规则

@keyframes animationname{
keyframes-selector{
css-style;
}
}

animationname为动画的名称
动画时长的百分比，值0-100%；form（与0%相同），to（与100%相同）

设置动画属性

语法：animation:name duration timing-function delay interation-count direction
animation-name:@keyframes动画名称
animation-duration:动画完成一个周期所花费的秒或毫秒，默认是0
animation-timing-function:动画的速度曲线，默认是ease
animation-delay:动画何时开始，默认是0
animation-interation-count:动画被播放的次数，默认是1，值为infinite表示无限播放
animation-direction:动画是否在下一周期逆向播放，默认是normal

<div id="com">
    <img src="img/hello.jpg">
</div>

#com{
animation: meinv 5s 3;
}
@keyframes meinv{
0%{
transform: rotate(60deg);
transform: scale(0);
}
55%{
transform: rotate(180deg);
}
100%{
top:0;
transform: rotate(360deg);
}
}