transform,transition,animation的作用?

1.transform: 

描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转roatae、   扭曲skew、 移动translate、缩放scale以及矩阵变形matrix

transition和animation两者都能实现动画效果

transform常常配合transition和animation使用

2.transition:样式过渡,从一种效果逐渐变为另一种效果

transition是一个各写属性

Transition:transition-property,transition-duration,transition-timing-function,transition-delay

从左到右分别是:css属性,样式效果花费时间,速度曲线,过渡开始的延迟时间

transition通常和hover等事件配合使用,需要由事件来触发过渡

3.animation动画 由@keyframes来描述每一帧的样式

区别:

1.1)transform仅描述元素的静态样式,通常配合transition和animation使用

1.2)transition通常和hover等事件配合使用,animation是自发的,立即播放

1.3)animation可以设置循环次数

1.4)animation可以设置每一帧的样式和时间,transition只能设置头尾

1.5)transition可以和js配合使用,js设定要变化的样式,transition负责动画效果