animation

一、基本语法

 

animation: name duration timing-function delay iteration-count direction;

 

 

这是html代码（一张200*200的图片）：

<img src="dog.jpg">

 

 

1.1、首先你得定义一个动画的名字（name） 和 动画的持续时间（duration）

 

img:hover{
    animation: change 1s;
}

 

上面代码表示，当鼠标悬停在这张图片上时，会生成一个叫做change的动画，持续时间为1秒，接下来，我们需要用keyframes关键字，定义change动画

1. @keyframes change{ 0%{ width: 200px; } 50%{ width: 400px; } 100%{ width: 200px; } }

上面代码表示change动画一共有3个状态，分别为起始（0%）、中间点（50%）、结束（100%），如果有需要可以插入更多状态。

运行过后，会发现鼠标悬停图片上，图片先变为400像素宽，紧接着变回200像素宽，整个动画持续1秒钟。

 

1.2、timing-function

这个属性规定整个动画执行的速度曲线

• linear  动画从头到尾的速度都是相同的
• ease   动画以低速开始，然后加快，在结束前变慢（默认）
• ease-in 动画以低速开始
• ease-out 动画以低速结束
• ease-in-out 动画以低速开始和结束
• cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

img:hover{
    animation: change 1s linear;
}

上面的代码我在后面加了个linear的值，表示整个动画将匀速运行。

 

1.3、delay

这个属性规定动画开始之前的延迟

img:hover{
    animation: change 1s linear 1s;
}

上面的代码加了个1s的值，表示延迟1秒钟后开始执行，默认值为0，不延迟。

 

1.4、iteration-count

这个属性规定了动画执行的次数，默认为1次，如有需要，可以明确指出次数或者无限次数执行（infinite）

 

img:hover{
    animation: change 1s linear 1s 3;
}

 

上面的代码添加了iteration-count属性值为3次，整个动画将不间断运行3次，然后停止。

 

1.5、direction

这个属性规定了是否要轮流反向播放动画，如果值为alternate，则动画会在奇数次数（1、3、5...）正常运行，而在偶数次数（2、4、6...）向后播放，举栗：

@keyframes change{
    0%{
        width: 200px;
    }
    100%{
        width: 400px;
    }
}

将之前的change动画改为如上，如果此时无限执行次数的话，会发现，动画由200像素，缓慢变化到400像素，然后跳到200像素，再重复。这里是由400像素宽跳到200像素宽，很突然，此时，可以加上属性direction，并赋值为alternate，偶数次数，就会反向执行，整个动画流畅。

img:hover{
    animation: change 1s infinite alternate;
}

如果执行次数是一次，该属性没效果。

 

补充：

1、nimation-fill-mode

一般动画结束以后，会立即从结束状态跳到结束状态，如果想让动画停留在结束位置，就可以使用这个属性。值为forwards

 

img:hover{
    animation: change 1s forwards;
}

 

现在这个动画即使执行一次，完毕并不会跳到开始状态，而是停留在结束状态。

 

2、简写方式

上述是采用简写方式

img:hover{
    animation: change 1s linear 1s 3 alternate forwards;
}

其实可以分解成各个单独的属性：

img:hover{
    animation-name:change;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-delay: 1s;
    animation-iteration-count:3;
    animation-direction:alternate;
    animation-fill-mode: forwards;     
}

 

3、keyframes的写法

keyframes关键字用来定义动画的各个状态，它的写法相当自由：

@keyframes change{
    0%{
        width: 200px;
    }
    50%{
        width: 300px;
    }
    100%{
        width: 400px;
    }
}

其中0%可以用from表示，100%可以用to表示，因此上面的代码可以写成：

@keyframes change{
    from{
        width: 200px;
    }
    50%{
        width: 300px;
    }
    to{
        width: 400px;
    }
}

另外，浏览器从一个状态过渡到另一个状态，是平滑过渡，可以用steps函数实现分布过渡：

animation: change 1s steps(10);

 

4、animation-play-state

有时动画播放过程中，会突然停止，这是，默认行为是立即跳到开始状态。

比如我这里让鼠标移入图片自己旋转：

img:hover{
    animation: change 1s infinite;
}
@keyframes change{
    from{
        transform: rotateZ(0deg);
    } 
    to{
        transform: rotateZ(360deg);
    }
}

正常情况下，我设置了无限次数，鼠标放在图片上时一直旋转的，但是突然离开，他就会道原始状态。

这里改变一下：

img{
    animation: change 1s infinite;
    animation-play-state: paused;  
}
img:hover{
     animation-play-state: running;    
}
@keyframes change{
    from{
        transform: rotateZ(0deg);
    } 
    to{
        transform: rotateZ(360deg);
    }
}

上面代码定义了一个动画，默认状态是暂停的，鼠标移入才开始执行，离开就暂停。突然离开，会变成：

 

7、浏览器前缀

目前，ie10+、firefox、欧朋浏览器支持没有前缀的animation。而Safari 和 Chrome则需要添加 -webkit- 前缀，也就是说，在实际的项目中，必须写成下面这样子：

img:hover{
    animation: change 1s;
    -webkit-animation: change 1s;
}
@keyframes change{
    from{
        transform: rotateZ(0deg);
    } 
    to{
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes change{
    from{
        transform: rotateZ(0deg);
    } 
    to{
        transform: rotateZ(360deg);
    }
}