跳到主要内容

3.2-浏览器动画

Create by fall on 07 Sep 2019
Recently revised in 05 Jul 2023

transform​

只能作用在 display:block，或 inline-block 元素上。

translate​

translate（平移）：对当前元素进行平移

相关参数：translateX 、translateY 、ranslateZ (ranslateZ 是3D平移，在前后移动)

/* translate(x,y,z) 分别移动 x轴 y轴 z轴*/
/* 默认向左、上分别平移 50% */
transform:translate(-50%,-50%);
/* 默认向右分别平移 50px */
transform:translateX(50px)

scale​

scale（缩放）：(输入的值为比例，进行比例缩放)

scaleX、scaleY、scaleZ

/* scale(x,y) 分别缩放 x轴 y轴*/
transform: scale(2,0.5);

rotate​

rotate（旋转）：围绕对应坐标轴进行旋转

rotateX、rotateY、roteteZ

/* 默认围绕 z轴转动 */
transform: rotate(45deg);
transform: rotate(0.5turn); /* 可以使用 turn 作为单位，1 turn 等于一圈 */
/* 围绕 X轴转动 */
transform: rotateX(45deg);
transform: rotateY(0.5turn);

skew​

skew（斜切）：对于图像进行斜切(自己试试去)

.box{
  /* transform:skew(-90deg,0); */
	transform: skew(45deg,0deg);
}

transform-origin​

transform-origin（初始位置）：定义基点的位置

使用

transform: translate(-50%, -50%) scale(0.5); /* 先移动，后缩放 */
transform: scale(0.5) translate(-50%, -50%); /* 先缩放，后移动 */

变形只能添加给块元素，对内联元素无效

可以进行复合书写，书写多个不同操作

translate 会受到其他三个值的影响（所以 translate 会受到前面值的影响）

motion​

（动态模糊）

/* 动态模糊 inherit | initial | auto | none | blur */
motion-rendering: blur; 
/* 类似于相机的快门，指的是快门角度，用来控制模糊量或模糊强度 */
motion-shutter-angle: 180deg;

matirx​

指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的

笛卡尔坐标

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

transition​

transition 过度

在添加一些样式后，如果直接生效会导致用户观感差，此时可以使用 transition 进行过渡。

在添加类或者是伪类（:hover）时，使用 transition 进行过渡

<style>
  div:hover{background-color:yellow}
</style>
  • transition-property：指定使用过渡的内容
  • transition-delay：延时时间
  • transition-duration：持续时间
  • transition-timing-function：规定播放曲线
    • linear（匀速）、ease（逐渐慢）、ease-in（逐渐快）ease-out（减速）、ease-in-out（先加速后减速）、cubic-bezier（自定义）
.box {
  transition: cubic-bezier(.3,.87,.73,.2);
  transition-property:background-color,color;
  transition-delay: .6s; /* 应用转换的延迟 */
  transition-duration: 2s; /* 动画持续时间 */
}
.box:hover {
  background-color:magenta;
}

自定义运动效果查看网站：https://cubic-bezier.com/

animation​

定义复杂的动画

animation 复合写法属性分别为

name duration timing-function delay iteration-count direction fill-mode;

  • animation-name 设置动画的名称
  • animation-duration 设置动画的持续时间
  • animation-delay 设置动画的延迟时间
  • animation-iteration-count 动画重复次数，默认值是1，infinite 无限次数
  • animation-iteration-direction 动画的方向，可以设置为逆向（reverse），即从 100% -> 0%
  • animation-timing-function 动画的运动形式

animation-timing-function：可选值同 transition-timing-function：linear（匀速）、ease（逐渐慢）、ease-in（逐渐快）ease-out（减速）、ease-in-out（先加速后减速）、cubic-bezier（自定义）

自定义运动效果：cubic-bezier(n ,n, n ,n)，https://cubic-bezier.com/

注意：运动结束后默认情况下会回到初始位置。

fill-mode​

animation-fill-mode：规定动画播放效果之前或者之后，其动画效果是否可见

  • none：默认值在运动结束后回到初始位置，(在延迟的情况下，先生效原样式，时间结束之后生效 0%)
  • backwards：在有延迟的情况下，先展示 0% 的动画效果，延迟结束后动画再开始运动
  • forwards：在运动结束之后，停止在运动结束的位置
  • both：backwards 和 forwards 同时生效

direction​

animation-direction：规定动画的播放顺序

  • alternate：一次正向，之后再执行一次逆向 0->100%->0
  • alternate-reverse：100%->0->100%
  • reverse：仅进行一次逆序播放
  • normal：默认值，一次正向播放

示例​

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

动画库​

animate.css

官网地址： https://animate.style/

3D动画​

transform 中包含 3D 的动画

  • rotateX：默认向上翻转
  • rotateY：默认向右翻转
  • translateZ：正值向前，负值向后
  • scaleZ：绘制立体元素的厚度
  • scale3d：三个值 x y z
  • translate3d：三个值 x y z
  • rotate3d：四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

transform-origin：center center -50px（Z轴只能写数值，不能写表达式）

transform-style：3D空间，可选值：flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

backface-visibility：背面隐藏、hidden、visible (默认值)

perspective​

perspective（景深）：离屏幕多远的距离去观察元素，值越大幅度越小。

perspective-origin：景深-基点位置，观察元素的角度。

参考文章​

文章名称（作者）链接
transform（MDN文档）https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform