CSS变形与动画

变形

div{
  transform: rotateX(180deg);/*绕X轴旋转180度*/
  /*
    rotate 旋转
      rotateX, rotateY, rotateZ 绕X,Y,Z轴旋转
    scale 缩放
      X,Y,Z ...
    skew 倾斜
      X,Y ...
    translate 移动
      X,Y,Z ...
    单位:角度deg
  */
}

过渡

div{
  transform: rotateX(180deg);
  transition: all 1s ease 2s; /* 所有属性 持续1秒 速度曲线为ease 延迟1秒开始*/
  /*
    transition-property 属性
    animation-duration 持续时间
    transition-timing-function 速度曲线 ease linear ...
    transition-delay 延时
  */
}

动画

/* 定义动画myani: 宽度从100px到300px */
@keyframes myani{
  0%{
    width: 100px;
    /* css */
  }
  100%{
    width: 300px;
    /* css */
  }
}

div{
  animation: myani 5s;/* 使用动画myani, 持续5秒 */
  /*
    animation-name  要使用的@keyframes名称
    animation-duration  持续时间
    animation-timing-function   速度曲线
    animation-delay 延迟
    animation-iteration-count  动画循环次数
    animation-direction 下一周逆向播放
    animation-play-state 动画运行、暂停状态
    animation-fill-mode 不播放动画时的状态 forwards播放结束后保留在最后一帧状态
  */
}