transform

1.基本定义

transition：主要用于元素旋转、缩放、移动、倾斜

2.语法

transform: none | transform-functions

默认情况下为none，表示不应用任何变化，也可以指定一个或多个transform-functions的值，transform-functions指css变换函数，如果是多个，复合变换按从右到左的有效顺序地应用。

常用属性有 scale()、rotate()、translate()、matrix()、skew()用于缩放,顺逆时间旋转,平移,矩阵变换,xy轴旋转等交互效果

3.应用场景

1.最常见的一个应用场景是用于实现不定宽高元素的垂直水平居中布局。

<!--需要垂直水平居中的元素-->
.middleBox{  
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

2.触发某个元素实现旋转移动动画

.scale:hover{ 
   transform: skew(45deg) translate(20px, 20px)
 }

transition

1.基本定义

可以为一个元素在不同状态之间切换的时间定义不同的过渡效果。常用在不同的伪元素之间切换，如：hover

2.语法

transition: property duration timing-function delay;

transition属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性，其中，

transition-property是用于指定CSS属性的name，来表示的transition大小,位置,扭曲等效果，除特定的属性变化效果，如margin-right,width等，也可以用none:（没有属性获得过渡效果）和all（所有属性的变化都获得过渡效果）表示，
transition-duration是用于指定过渡效果需要花费的时间，默认值是0
transition-timing-function用于指定过渡效果的转速曲线，常用的属性值为linear（以相同速度开始至结束），ease（慢速-变快-慢速），ease-in（以慢速开始），ease-out（以慢速结束）， ease-in-out: （以慢速开始和结束），也可以使用 cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中定义自己的值。
transition-delay是用于定义transition效果开始的时候该属性也支持多个属性,用逗号做分隔，如：transition: margin-right 4s, color 1s;

3.应用场景

常用语按钮激活状态的过渡效果

.button{
  width: 120px; 
  height: 38px; 
  border-radius: 10px; 
  background-color: #1865f2;
  text-align: center; 
  line-height: 38px; 
  color: #fff; 
  transition: all 0.2s ease-in; 
 } 
 .button:hover { 
   background: #4684f5;
   width: 150px; 
 }

animation

1.定义

animation用来定义多个中间态的一系列的动画过渡效果，常用于较为复杂、有中间态的动画。

2.语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation属性是animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count,animation-direction，animation-fill-mode和animation-play-state属性的一个简写属性形式。其中，

animation-name 指定要绑定到选择器的关键帧的名称，是指向的是@keyframes定义的动画
animation-duration 规动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期（linear 、 cubic-bezier-timing-function 、 step-timing-function 、 frames-timing-function）
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数
animation-direction 指定是否应该轮流反向播放动画（normal 、 reverse 、 alternate 、 alternate-reverse）
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式（none、 forwards 、backwards 、 both）
animation-play-state 指定动画是否正在运行或已暂停（running 、 paused）

3.应用场景

执行一个循环自动执行的过渡动画

.box { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 80px; 
  height: 20px; 
  animation: move-to-right 2.0s infinite; 
} 
/* 定义右移动画 */ 
@keyframes move-to-right { 
  0% { opacity: 1;left: 0; }  
  50% { opacity: 0.5;left: 20px; } 
  100% { opacity: 1; left: 0; } 
}

总结

transform, transition 和animation的区别:

属性	主要区别	使用区别
transform	主要是对元素做旋转、缩放、移动、倾斜等各种变化	可以通过和transition或者animation相结合实现,也可以通过js设置定时器来实现让这一变换过程具有动画的效果
transition	该属性常用于对单个或多个css属性发生变化时的过渡动画	通常和hover等事件配合使用
animation	该属性一般用于较为复杂、有中间态的动画	由@keyframes 来描述每一帧的样式，是自发的，立即播放，可以设置循环次数

面试官：请讲一下transform、transition、animation的区别

transform

1.基本定义

2.语法

3.应用场景

transition

1.基本定义

2.语法

3.应用场景

animation

1.定义

2.语法

3.应用场景

总结