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负责动画效果