CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式

CSS动画

一、触发式动画Transition

transition过渡动画，一般配合伪类使用

属性值：

1. transition-duration：

   指定过渡效果的持续时间，以秒或毫秒为单位。

2. transition-timing-function：

   指定过渡效果的时间函数，即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。

3. transition-delay：指定过渡效果延迟的时间，以秒或毫秒为单位。

4. transition-property：指定要过渡的 CSS 属性。可以指定一个或多个属性

举个例子，

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
    /* 复合属性*/
    transition: 属性名,过渡时间,时间函数,延迟时间;
}

.box:hover {
  background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

transition 属性只能应用于一些可以被数值化的 CSS 属性，例如 width、height、background-color 等。像 display、visibility 等不能被过渡的属性就无法使用 transition 属性来实现动画效果。

此外，transition 属性也可以与其他 CSS 动画属性（如 animation）组合使用，以实现更加复杂的动画效果。

二、主动式动画Animation

CSS的 Animation 属性可以实现比 transition 更加复杂、多样化的动画效果。
animation 属性需要指定一个动画名称，以及一系列动画选项，包括动画的持续时间、时间函数、延迟时间、重复次数、播放方向等。

animation ：动画名（name) ，持续时间(duration)，延迟时间(delay），动画速率（step（5），运动次数（默认一次，可选n/infinte)**

具体来说，animation 属性有以下几个值：

1. animation-name：指定动画的名称，通常需要与 @keyframes 规则配合使用。@keyframes 规则用于定义动画的关键帧，即动画从开始到结束的过程中的关键状态。可以通过指定关键帧的百分比或关键字来定义不同的状态。例如：

/*定义函数*/
@keyframes move {
  from {
      left: 0;
    }
  to {
      left: 100px;
    }
}

.box {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  /* 复合属性*/
    animation : move 2s linear;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个例子中，定义了一个名为 move 的动画，它包含两个关键帧，分别在 0% 和 100% 处，分别定义了 .box 元素的 left 属性的值。当应用了这个动画后，.box 元素会从 left=0 的位置平滑过渡到 left=100px 的位置。

1. animation-duration：指定动画的持续时间，以秒或毫秒为单位。

2. animation-timing-function：指定动画的时间函数，即控制动画速度的函数。

   可取值：ease、linear、ease-in、ease-out、ease-in-out 等。

3. animation-delay：指定动画延迟的时间，以秒或毫秒为单位。

4. animation-iteration-count：指定动画的重复次数。

   可取值：数值（如 2、3）或关键字（如 infinite，表示无限重复）。

5. animation-direction：指定动画的播放方向。

   可取值： normal（正常播放）、reverse（反向播放）、alternate（正反交替播放）、alternate-reverse（反正交替播放）。

6. animation-fill-mode：指定动画结束后元素的状态

   可取值：

   • none: 这是默认值，表示动画在播放之前或之后，不会影响元素的样式。
   • forwards: 表示动画在结束后，元素会保留最后一个关键帧的样式。
   • backwards: 表示动画在开始前，元素会应用第一个关键帧的样式。
   • both: 表示动画在开始前和结束后，都会应用相应的关键帧的样式。

7. animation-play-state：控制动画的播放状态等。

   可取值：paused 停止 ，running 运动起来

需要注意的是，动画效果的复杂性通常会影响性能。因此，在使用 animation 属性时，应尽量避免使用过于复杂的动画效果，以免影响页面的性能。

三、Transfrom 动画

Transform 是 CSS3 中的一个属性，可以对元素进行变形，包括旋转、缩放、扭曲等效果。Transform 可以结合 CSS 的过渡和动画属性使用，实现各种有趣的动画效果。

Transform 属性的语法如下：

transform: none|transform-functions;
1

其中，transform-functions 是一个或多个变形函数，可以使用以下变形函数：

• translate()：平移元素，

  接受 X 和 Y 方向的偏移量

  百分比

  像素

• rotate()：旋转元素，接受旋转角度，可以使用度数或者弧度deg作为单位。

• scale()：缩放元素，接受 X 和 Y 方向的缩放比例，可以使用小数或者百分比作为单位。

• skew()：扭曲元素，接受 X 和 Y 方向的扭曲角度，可以使用度数或者弧度作为单位。

• matrix()：可以通过一个 6 个值的矩阵来实现所有变换效果。

除了变形函数，还有一些常用的属性：

• transform-origin：指定元素变形的中心点，可以设置为一个固定的坐标点，也可以设置为相对位置的百分比。
• transform-style：指定元素的子元素是否继承父元素的变形效果，可以设置为 flat 或者 preserve-3d。
• perspective：设置元素的透视距离，只有在使用 preserve-3d 的情况下才会起作用。

例如，以下代码实现了一个旋转和缩放的动画效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease;
}

.box:hover {
  transform: rotate(45deg) scale(1.2);
}
1
2
3
4
5
6
7
8
9
10

CSS 3D 动画属性是一组可以使用 CSS 实现 3D 动画效果的属性，这些属性包括：

1. transform-style：指定被转换元素的子元素如何被平移、旋转和缩放。可取值：
   • flat：默认值，子元素不进行 3D 转换。
   • preserve-3d：子元素进行 3D 转换。
2. perspective：指定 3D 转换元素的观察者视角，用于模拟真实 3D 空间。值越小，视角越近，立体感越强。可取值：
   • length：表示长度值，必须为正数，常见单位有 px、em、rem、% 等。
3. perspective-origin：指定 3D 转换元素的观察者视角的位置。可取值：
   • x-axis：left、center、right。
   • y-axis：top、center、bottom。
   • z-axis：length。
4. transform-style：指定被转换元素的子元素如何被平移、旋转和缩放。可取值：
   • flat：默认值，子元素不进行 3D 转换。
   • preserve-3d：子元素进行 3D 转换。
5. transform：指定元素进行平移、旋转、缩放等变换操作。可取值：
   • translateX(x)：沿 x 轴平移。
   • translateY(y)：沿 y 轴平移。
   • translateZ(z)：沿 z 轴平移。
   • translate3d(x, y, z)：三维平移。
   • scaleX(x)：沿 x 轴缩放。
   • scaleY(y)：沿 y 轴缩放。
   • scaleZ(z)：沿 z 轴缩放。
   • scale3d(x, y, z)：三维缩放。
   • rotateX(angle)：沿 x 轴旋转。
   • rotateY(angle)：沿 y 轴旋转。
   • rotateZ(angle)：沿 z 轴旋转。
   • rotate3d(x, y, z, angle)：三维旋转。
   • skewX(angle)：沿 x 轴倾斜。
   • skewY(angle)：沿 y 轴倾斜。
   • matrix(n,n,n,n,n,n)：矩阵变换。
   • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：三维矩阵变换。
6. transition：指定元素过渡效果的相关属性。可取值：
   • transition-property：指定要过渡的 CSS 属性名称。
   • transition-duration：指定过渡效果持续的时间。
   • transition-timing-function：指定过渡效果的时间函数。
   • transition-delay：指定过渡效果延迟的时间。
7. animation：指定元素动画效果的相关属性。

四、阴影和滤镜样式

• box-shadow

  box-shadow 属性用于在元素周围创建一个阴影效果，它可以为一个元素添加立体感和深度感。其基本语法如下：

  box-shadow: h-shadow v-shadow blur spread color inset;
  1

  其中各参数的含义如下：

  • h-shadow：水平阴影的位置，可正可负，值为0表示无水平阴影，必须设置。
  • v-shadow：垂直阴影的位置，可正可负，值为0表示无垂直阴影，必须设置。
  • blur：阴影的模糊半径，可选，值越大，阴影越模糊，不设置时阴影边缘锐利。
  • spread：阴影的扩散半径，可选，正数表示扩大阴影面积，负数表示缩小阴影面积，不设置时阴影与元素同大小。
  • color：阴影的颜色，可选，默认为黑色。
  • inset：可选，表示阴影是否在边框内部，不设置时阴影在边框外部。

  box-shadow 属性还支持多个阴影，多个阴影之间用逗号隔开即可。例如：

  box-shadow: 2px 2px 10px #666, -2px -2px 10px #666;
  1

  box-shadow 属性可以为元素添加阴影效果，同时还可以通过调整各个参数的值，实现不同的阴影效果，例如内阴影、多重阴影等。

  text-shadow 属性用于为文本添加阴影效果，它可以为文本增加立体感和视觉效果。其基本语法如下：

  text-shadow: h-shadow v-shadow blur color;
  1

  其中各参数的含义如下：

  • h-shadow：水平阴影的位置，可正可负，值为0表示无水平阴影，必须设置。
  • v-shadow：垂直阴影的位置，可正可负，值为0表示无垂直阴影，必须设置。
  • blur：阴影的模糊半径，可选，值越大，阴影越模糊，不设置时阴影边缘锐利。
  • color：阴影的颜色，可选，默认为黑色。

• text-shadow

  text-shadow 属性同样也支持多个阴影，多个阴影之间用逗号隔开即可。例如：

  text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff;
  1

  上述代码表示为文本添加两个阴影，一个在右下方，另一个在左上方。第一个阴影的水平偏移量为1px，垂直偏移量为1px，模糊半径为2px，颜色为#000；第二个阴影的水平偏移量为-1px，垂直偏移量为-1px，模糊半径为2px，颜色为#fff。

  text-shadow 属性可以通过调整各个参数的值，实现不同的文本阴影效果。通常，为文本添加一个略微模糊、颜色较浅的阴影，可以让文本看起来更加立体和清晰。

• filter

  filter 属性是 CSS3 中的一个强大属性，它可以为元素添加各种视觉效果，如模糊、颜色调整、亮度、对比度、饱和度等。其基本语法如下：

  filter: filter-function;
  1

  其中，filter-function 是一种滤镜函数，用于指定要应用的滤镜效果。常见的滤镜函数有以下几种：

  1. blur()

     用于模糊元素。参数值表示模糊半径，值越大，模糊程度越高。

     filter: blur(5px);
     1

  2. brightness()

     用于调整元素的亮度。参数值为一个百分数或小数，表示亮度的相对值。值小于 100% 表示降低亮度，值大于 100% 表示增加亮度。

     filter: brightness(80%);
     1

  3. contrast()

     用于调整元素的对比度。参数值为一个百分数或小数，表示对比度的相对值。值小于 100% 表示降低对比度，值大于 100% 表示增加对比度。

     filter: contrast(150%);
     1

  4. grayscale()

     用于将元素转换为灰度图像。参数值为一个百分数或小数，表示转换的程度。

     filter: grayscale(50%);
     1

  5. hue-rotate()

     用于调整元素的色相。参数值为一个角度值，表示旋转的角度。旋转的角度范围为 0~360 度。

     filter: hue-rotate(90deg);
     1

  6. invert()

     用于反转元素的颜色。参数值为一个百分数或小数，表示反转的程度。

     filter: invert(50%);
     1

  7. opacity()

     用于调整元素的透明度。参数值为一个百分数或小数，表示透明度的相对值。值小于 100% 表示降低透明度，值大于 100% 表示增加透明度。

     filter: opacity(50%);
     1

  8. saturate()

     用于调整元素的饱和度。参数值为一个百分数或小数，表示饱和度的相对值。值小于 100% 表示降低饱和度，值大于 100% 表示增加饱和度。

     filter: saturate(150%);
     1

     9、sepia()

     用于将元素转换为深褐色调的图像。参数值为一个百分数或小数，表示转换的程度。

     1. drop-shadow()

        用于为元素添加阴影效果。参数值可以包括一个长度值和两个可选的颜色值。第一个参数表示阴影的水平偏移量，第二个参数表示阴影的垂直偏移量，第三个参数表示阴影的模糊半径，第四个参数表示阴影的颜色。如果只有一个长度值，则表示阴影的水平和垂直偏移量相同。

        filter: drop-shadow(2px 2px 2px #000);
        1

     2. url()

        用于引用 SVG 图像或定义自定义滤镜。参数值为一个 SVG 文件或 SVG 中定义的一个滤镜标识符。

        filter: url("filters.svg#filter-id");
        1

        上述是一些常见的 filter 函数，还有其他一些函数，如 url() 、 matrix() 等等。使用 filter 属性可以为网页元素添加一些很酷的视觉效果，但同时也需要考虑浏览器兼容性问题。

五、CSS 的3D动画

CSS 3D 动画属性的其他常用属性如下：

1. transform-origin：指定元素变换的基点位置，默认是元素中心点。可取值：
   • x-axis：left、center、right。
   • y-axis：top、center、bottom。
   • z-axis：length。
2. backface-visibility：指定元素反面是否可见。可取值：
   • visible：默认值，反面可见。
   • hidden：反面不可见。
3. perspective-origin：指定 3D 转换元素的观察者视角的位置。可取值：
   • x-axis：left、center、right。
   • y-axis：top、center、bottom。
   • z-axis：length。
4. transform-style：指定被转换元素的子元素如何被平移、旋转和缩放。可取值：
   • flat：默认值，子元素不进行 3D 转换。
   • preserve-3d：子元素进行 3D 转换。
5. perspective：指定 3D 转换元素的观察者视角，用于模拟真实 3D 空间。值越小，视角越近，立体感越强。可取值：
   • length：表示长度值，必须为正数，常见单位有 px、em、rem、% 等。
6. animation：指定元素动画效果的相关属性。可取值：
   • animation-name：指定动画名称。
   • animation-duration：指定动画效果持续的时间。
   • animation-timing-function：指定动画效果的时间函数。
   • animation-delay：指定动画效果延迟的时间。
   • animation-iteration-count：指定动画重复次数。
   • animation-direction：指定动画方向。
   • animation-fill-mode：指定动画效果在开始前和结束后如何显示。
   • animation-play-state：指定动画的播放状态，可以暂停或继续播放。