HTML/CSS 变形（盒子水平垂直居中）、过渡、动画 （学习整理）

变形

transform:scale(*)	>1放大 0-1缩小 <1基于中心点对称
transform:rotate(？deg)	deg(度数） 正值-顺时针旋转 负值-逆时针旋转
transform:skew(？deg)	扭曲效果
transform:translate(？，？)	平移 第一个值为x轴平移距离 第二个值为y轴平移距离

使用translate让盒子水平垂直居中

 <style>
        .fa{
            position: relative;
        }
        .son{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

---

过渡transition

<style>
      div{
          transition: transform 3s linear 2s;
      }
    </style>
    transition:被改变的属性值   运行时间   运行曲线    延迟时间

将具体被改变的属性改成all

<style>
      div{
          transition: all 3s linear 2s;
      }
    </style>
    all:过渡所有被改变的属性

---

## 动画

设定动画

<style>
      @keyframes 动画名称{

      }
    </style>

添加动画

div{
             animation: play 3s linear infinite forwards
         }
         animation: 动画名称  时间  速度曲线 次数 是否逆向

速度曲线：ease默认 linear
次数：infinite 无限次
逆向播放：alternate（逆向） nomal（不逆向） forwards
forwards 规定动画结束后不回到起点（停留在终点）
backwards 规定动画结束以后停留在起点

animation-play-state：paused
改变动画状态 paused（暂停动画）