scss+动画

 --------------------------------继承
.commonDiv {
  border: 1px solid red;
  border-radius: 5px;
  color: red;
}
.zu1Div2 {
  @extend .commonDiv;
  color: yellow;
}
 过渡：transition （transition的中文含义是过渡。）
.div12 {
  width: 200px;
  height: 100px;
  background: pink;
  // 4个参数 最后可省略  （1.那些属性过度 一般是all  2.过度时间 3.运动曲线一般是线性 4 延迟时间一般省略）
  transition: all 2s linear;
  &:hover {
    width: 500px;
    background: red;
  }
}
 2D 转换 （可以实现元素的 位移、旋转、变形、缩放） transform  
--------------------动画不会影响上下文布局 （例子：div放大时候回盖着左右相邻的元素 会在他们上面）------------------------------------------------------------------------------------------------
@keyframes xinTiao {
  0% {
    // transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    background: black;
  }
  100% {
    // transform: scale(1);
  }
}
.div1 {
  width: 100px;
  height: 100px;
  background: pink;
  transition: all 0.3s linear 0s; // 这个要放在这里   配合 transform 使用
  &:hover {
    // animation: xinTiao 2s linear;   //这个是和 keyframes 配合使用的
    transform: scale(1.2);
  }
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------