transition（过渡）transform(变换，旋转，位移，2d，3d)

transition（过渡）,用于平滑/过渡变化时候不显得那么突兀...（一般用于鼠标移入平滑移动的效果） transition 常用属性（需要过渡什么 过渡持续的时间 过渡的样式例如从慢到快等 延迟多久过渡）

进度条例子

.father{ width: 200px; height: 20px; border: 1px solid red; border-radius: 15px; &:hover .child{ width: 100%; border-radius: 15px; } .child{ width: 60%; height: 100%; background-color: red; border-radius: 15px 0 0 15px; //transition:什么属性要变化 过渡持续的时间 过渡的样式从快到慢匀速等等 延迟多久开始过渡 transition:width 3s ease 5s; //过渡 平滑效果 } }

transform(一般用于鼠标移入div位移,旋转，放大等的效果) www.w3school.com.cn/cssref/pr_t… 例子：