css基础练习五 -- transform transition animation

 transition
      <div className={styles.transitionconatiner}>
        <div>
          <div className={styles.transi_1}></div>
        </div>
        <div>
          <div className={styles.transi_2}></div>
        </div>
        <div>
          <div className={styles.transi_3}></div>
        </div>
        <div>
          <div className={styles.transi_4}></div>
        </div>
        <div>
          <div className={styles.transi_5}></div>
        </div>
      </div>
      transform
      <div className={styles.transformconatiner}>
        <div>
          <div className={styles.transformconatiner_one}></div>
        </div>
        <div>
          <div></div>
        </div>
      </div>
      动画
      <div className={styles.animationcontainer}>
        <div>
          <div className={styles.applyanimat}></div>
        </div>
      </div>

.transitionconatiner {
  width: 100vw;
  height: 100vh;
  display: flex;
  > div {
    border: 1px solid blue;
    width: 50vw;
    height: 15vh;
    margin-top: 5px;
    margin-left: 5px;
  }
  .transi_1 {
    width: 50px;
    height: 50px;
    background-color: #e63838;
  }
  .transi_2 {
    width: 50px;
    height: 50px;
    background-color: #e63838;
    transform: translateX(10px); //水平方向移动
    transform: translateY(30px); //垂直方向移动
    transform: translate(10px, 30px); //（水平，垂直）
  }
  .transi_3 {
    width: 50px;
    height: 50px;
    background-color: #e63838;
    transform: rotate(40deg);
  }
  .transi_4 {
    width: 50px;
    height: 50px;
    background-color: #e63838;
    transform: scale(1.2); //变大变小
  }
  .transi_5 {
    width: 50px;
    height: 50px;
    background-color: #e63838;
    transform: skewX(10deg); //沿 x 轴方向 倾斜
    // transform: skewY(10deg);  // 沿 y 轴方向 倾斜
    // transform: skew(10deg, 10deg); //(x, y)
  }
}
.transformconatiner {
  > div {
    border: 1px solid blue;
    width: 50vw;
    height: 15vh;
    margin-top: 5px;
    margin-left: 5px;
  }
  .transformconatiner_one {
    width: 200px;
    height: 200px;
    background-color: #f00;
    transition: all 4s;
    &:hover {
      width: 100px;
      height: 100px;
      transition: all 4s ease-in-out 0.5s; //过度属性（这里all-> width 和height）｜过度时间｜过度效果｜延迟多久开始
    }
  }
}
.animationcontainer {
  > div {
    border: 1px solid blue;
    width: 50vw;
    height: 15vh;
    margin-top: 5px;
    margin-left: 5px;
  }
  @keyframes change {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .applyanimat {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: change 4s linear 1s infinite; //动画名｜完成时间｜动画的速度曲线｜多久执行｜动画次数
  }
}