translatation动画

答辩实训项目中，使用了translation动画。

代码如下：

#heZi>div{
    transition: all 0.5s;
}
#heZi>div:hover{
    transform: scale(1.05);
}
#middle>div{
    transition: all 0.5s;
}
#middle>div:hover{
    transform: scale(1.05);
}
#zhongJian>div{
    transition: all 0.5s;
}
#zhongJian>div:hover{
    transform: scale(1.05);
}
#xiaMian>div{
    transition: all 0.5s;
}
#xiaMian>div:hover{
    transform: scale(1.05);
}
#bottom>div{
    transition: all 0.5s;
}
#bottom>div:hover{
    transform: scale(1.05);
}

以下是我的理解：

1.transform：scale（1.05）

鼠标悬停后，放大一点五倍

2.transition：all 0.5s

鼠标悬停后放大一点五倍的过程中，共用时0.5s

以下为效果

translation和animation的区别：

translation属性是指css在发生变化是，所进行的时长，速率，延迟等

例子 translation:属性名 1s（动画时长）2s（动画延迟）ease（动画速率）

多个属性动画相同可以all  2s  2s  ease；

如果动画的属性不同可以用逗号 width 1s 2s ease，height 4s 2s ease；

 

animation 属性一般包含动画名称（需要配合@keyframes aaa{}；）动画时长

动画次数（infinite表示无限循环）

动画顺序（normal默认，alternate一次结束会反向折回  1-2-3-2-1 reverse反向动画 alternate-reverse 反向折回）

动画最终状态（forwards结束状态 none默认，没有动画的状态 backwards动画第一帧 both根据动画方向决定停止状态）

step(n)表示把动画一帧一帧的展示，分布进行，动画是中断的