css动画

使用@keyframes创建动画  @keyframes理解为帧   和  animation 配合使用

使用百分比来规定变化发生的事件，也可以使用from和to关键词，但为了兼容建议百分比

0%动画的开始  100%动画结束

animation：animation-name(必须)  animation-duration(必须)   animation-timing-function  animation-delay   animation-iteration-count   animation-direction

animation-name 就是绑定的keyframes

animation-duration  动画运行事件  默认是0  0表示不播放动画

animation-timing-function  动画运行的速度曲线  默认ease(动画以低速开始，然后加快，在结束前变慢) 也可以是linear(动画从头到尾的速度是相同的) ease-in(动画低速开始)  ease-out(动画低速结束)

animation-delay  动画开始之前的延迟

animation-iteration-count  动画播放的次数，可以是1，2，3，4……也可以是infinite(无限循环)

animation-direction  是否反向播放动画  如果是alternate 则动画会在奇数次数(1,3,5,7,9……)正常播放，在偶数次数后退  但是如果播放次数只是1次，那这个属性设不设没意义

比如下面这个例子，正方形红色，走口字形

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>

但是animation有两个属性不能简写在里面，要单独设置

animation-play-state  设置动画是暂停还是播放 默认running  paused暂停   running播放

animation-fill-mode  设置动画在播放前或播放后，其动画效果是否可见  动画完成后，动画的状态会回到初始状态。要改变这一点，用animation-fill-mode:forwards 使动画完成后停留在最后一帧