css动画

注意事项

• 对于transform属性不能跟animation同时使用，否则默认执行animation帧动画，transform属性无用
  

• 可以利用i标签实现跟div相同的功能，不过注意要转化成盒子模型，即display:blocak

• 对于实现有些动画，可以使用同一种样式，通过设置不同的延迟时间产生不同的效果
  

• animation有一个属性step()表示每一帧的间隔时间

• 利用百分比宽度对父子关系设置重复个数样式比较方便

用法如下：捕鱼游戏的简单设计

1. 先将如图所示的图片插入进去
2. 通过每次动画调用不同的坐标实现鱼的移动。

代码如下

html代码

<div class="shark">
    <div class="sharkfish"></div>

</div>

css代码

.shark{
    width: 509px;
    height: 270px;
    animation: pao 20s linear infinite;
}
@keyframes pao {
    from{transform:translatex(-600px);}           /*表示鱼从左到右出来的动画*/
    to{transform: translatex(2000px);}
}
.sharkfish{
    width: 509px;
    height: 270px;
    background:url("./img/shark1.png") no-repeat;
    animation: active 1s steps(8) infinite;       /*step表示每一帧的间隔时间是帧动画每间隔8sj即暂停8s通过坐标的变化调用不同位置上相同样式的鱼*/
}
@keyframes active {
    from{}                                  /*表示不同坐标鱼出来的动画*/
    to{background-position: left -2160px;}
}

*其实是视觉差效果，不是一个鱼在动。而是帧动画每间隔8sj即暂停8s通过坐标的变化调用不同位置上相同样式不同摆动幅度的鱼。

• 先旋转后移动和先移动后旋转的差别

1. 先移动后旋转不需要考虑坐标系的变化，
2. 先旋转后移动的话因为旋转后整体的坐标系会发生变化，所以需要考虑，本来移动的坐标轴可能已经发生改变。

例如：

    transform: rotatey(90deg) translatez(200px);

     transform: translatex(200px) rotatey(90deg) ;

以上两种写法效果一样，

对于第1种因为沿y轴旋转后z.x 都发生变化，z轴旋转到原来x轴位置，所以要实现同样的效果需要沿z轴平移。

• 伪类的悬停调用方法：before前面有两个点

.block:hover .i_1::before{

   height: 100%;

}