CSS 变换、过渡与动画

浏览器的坐标原点在左上角，向右和向下为正数

transform 形变

🚫 提示

对行内非替换元素无效（不能设置宽高的元素），不影响父元素的大小

平移 translate(x,y), xy百分比参照于自身的宽高

• translateX 仅水平
• translateY 仅垂直

不要层叠这两个，会覆盖

缩放 scale(x,y)

x y 宽高的倍数

旋转 rotate(deg) 角度

正数顺时针，负数逆时针 必须带单位

倾斜 skew(deg)

transform 设置多个值：

 .div {
   
 }

tranform-origin

修改当前元素的旋转原点

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;
/* x-offset | y-offset */
transform-origin: 3cm 2px;
/* x-offset-keyword | y-offset */
transform-origin: left 2px;
/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;
/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;
/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;
/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;
/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;
/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;
/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

transition 过渡动画

• transition-property 动画变化属性
• transition-duration 持续事件
• transition-timing-function 变化速率
• transition-delay 延迟出发

🚫 提示

不足

• 只能定义开始和结束动画，不能定义中间状态
• 不能重复执行，除非一致触发
• 需要特定状态下触发才会发生，如某个属性修改

Animation css序列帧动画

1. 使用keyframes，定义序列关键帧，决定每一帧如何执行
2. 配置动画的名称、持续时间、曲线、延迟、执行次数等

• animation-name：指定执行哪一个关键帧动画
• animation-duration：指定动画的持续时间
• animation-timing-function：指定动画的变化曲线
• animation-delay：指定延迟执行的时间
• animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
• animation-direction：指定方向，常用值normal和reverse
• animation-fill-mode：执行动画最后保留哪一个值

❤️ 提示

• none：回到没有执行动画的位置
• forwards：动画最后一帧的位置
• backwards：动画第一帧的位置

• animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）