0
点赞
收藏
分享

微信扫一扫

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

仲秋花似锦 2023-09-27 阅读 20
css笔记3d

CSS动画

一、触发式动画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;
}

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;
}

在这个例子中,定义了一个名为 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;

其中,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);
}

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
  • text-shadow

  • 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:指定动画的播放状态,可以暂停或继续播放。
举报

相关推荐

0 条评论