过度

可以实现元素本身变化的平滑效果

css
.box {
  transition: width time,height time;
}
/*all 所以变化全部为动效*/
.box {
  transition: all time;
}

动画

声明动画

css
@keyframes name {
  from { 
  
  } 
  to { 
      
  }
} 

参数： name: 动画名字
from: 初始状态 可以写为0%
中间0%~100%任何可以添加任何状态
to：终止状态 可以写为100%

调用动画

css
.box{animation: name time}

动画结束后始终保持100%状态

animation-fill-mode: forwards;

动画循环次数

animation-iteration-count: 3;
// infinite：无限循环