CSS3 动画、过渡、变换

过渡

transition: property duration  timing-function  delya;

• property 过渡的属性 多个属性之间用逗号隔开 none没有过渡属性 all所有的
• duration： 过渡时间 s / ms
• timing-function： linear匀速 ease
• delay 延迟时间

动画

1. 创建动画过程 @keyframes

2. 调用动画

animation: name duration timing-function delay iteration-count direction;

• name：动画名称，绑定到 @keyframes
• duration：完成动画的时间
• timing-function：曲线速度 linear
• delay：延迟时间
• iteration-count：动画播放次数 number，infinite 无限
• direction：是否轮流反向，alternate

变换

transform: translate(x,y) rotate(deg) scale(x,y) skew(x,y)
transform-origin: length | 关键字 | %
transform-style:flat | preserve-3d;
perspective: number;
backface-visibility: hidden;

• 2D

  • translate(x,y)：平移
  • rotate(deg)：旋转
  • scale(x,y)：缩放，1 默认值，比 1 大放大，比 1 小缩小
  • skew(x,y)：倾斜，单位是角度 deg

• 3D

  • translateZ()：z 轴平移，前后移动

• translate3d(x,y,z)

  • rotateX()：绕 x 轴旋转 前后翻转

• rotateY()：绕 y 轴旋转 左右翻转

  • rotateZ()：绕 z 轴旋转 水平翻转

• rotate3d(x,y,z,deg)：-1 0 1 0-360deg

  • scaleZ()：在 z 轴上缩放

• scale3d(x,y,z)

• perspective：视距

• transform-origin：元素的中心点

• transform-style：保留子元素的 3d 位置

• backface-visibility: 翻转之后看不见盒子背面