CSS动画
一、触发式动画Transition
transition过渡动画,一般配合伪类使用
属性值:
-
transition-duration:
指定过渡效果的持续时间,以秒或毫秒为单位。
-
transition-timing-function:
指定过渡效果的时间函数,即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
-
transition-delay:指定过渡效果延迟的时间,以秒或毫秒为单位。
-
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 属性有以下几个值:
- 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 的位置。
-
animation-duration:指定动画的持续时间,以秒或毫秒为单位。
-
animation-timing-function:指定动画的时间函数,即控制动画速度的函数。
可取值:ease、linear、ease-in、ease-out、ease-in-out 等。
-
animation-delay:指定动画延迟的时间,以秒或毫秒为单位。
-
animation-iteration-count:指定动画的重复次数。
可取值:数值(如 2、3)或关键字(如 infinite,表示无限重复)。
-
animation-direction:指定动画的播放方向。
可取值: normal(正常播放)、reverse(反向播放)、alternate(正反交替播放)、alternate-reverse(反正交替播放)。
-
animation-fill-mode:指定动画结束后元素的状态
可取值:
- none: 这是默认值,表示动画在播放之前或之后,不会影响元素的样式。
- forwards: 表示动画在结束后,元素会保留最后一个关键帧的样式。
- backwards: 表示动画在开始前,元素会应用第一个关键帧的样式。
- both: 表示动画在开始前和结束后,都会应用相应的关键帧的样式。
-
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 动画效果的属性,这些属性包括:
- transform-style:指定被转换元素的子元素如何被平移、旋转和缩放。可取值:
- flat:默认值,子元素不进行 3D 转换。
- preserve-3d:子元素进行 3D 转换。
- perspective:指定 3D 转换元素的观察者视角,用于模拟真实 3D 空间。值越小,视角越近,立体感越强。可取值:
- length:表示长度值,必须为正数,常见单位有 px、em、rem、% 等。
- perspective-origin:指定 3D 转换元素的观察者视角的位置。可取值:
- x-axis:left、center、right。
- y-axis:top、center、bottom。
- z-axis:length。
- transform-style:指定被转换元素的子元素如何被平移、旋转和缩放。可取值:
- flat:默认值,子元素不进行 3D 转换。
- preserve-3d:子元素进行 3D 转换。
- 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):三维矩阵变换。
- transition:指定元素过渡效果的相关属性。可取值:
- transition-property:指定要过渡的 CSS 属性名称。
- transition-duration:指定过渡效果持续的时间。
- transition-timing-function:指定过渡效果的时间函数。
- transition-delay:指定过渡效果延迟的时间。
- animation:指定元素动画效果的相关属性。
四、阴影和滤镜样式
-
box-shadow
box-shadow
属性用于在元素周围创建一个阴影效果,它可以为一个元素添加立体感和深度感。其基本语法如下:box-shadow: h-shadow v-shadow blur spread color inset;
其中各参数的含义如下:
h-shadow
:水平阴影的位置,可正可负,值为0表示无水平阴影,必须设置。v-shadow
:垂直阴影的位置,可正可负,值为0表示无垂直阴影,必须设置。blur
:阴影的模糊半径,可选,值越大,阴影越模糊,不设置时阴影边缘锐利。spread
:阴影的扩散半径,可选,正数表示扩大阴影面积,负数表示缩小阴影面积,不设置时阴影与元素同大小。color
:阴影的颜色,可选,默认为黑色。inset
:可选,表示阴影是否在边框内部,不设置时阴影在边框外部。
box-shadow
属性还支持多个阴影,多个阴影之间用逗号隔开即可。例如:box-shadow: 2px 2px 10px #666, -2px -2px 10px #666;
box-shadow
属性可以为元素添加阴影效果,同时还可以通过调整各个参数的值,实现不同的阴影效果,例如内阴影、多重阴影等。text-shadow
属性用于为文本添加阴影效果,它可以为文本增加立体感和视觉效果。其基本语法如下:text-shadow: h-shadow v-shadow blur color;
其中各参数的含义如下:
h-shadow
:水平阴影的位置,可正可负,值为0表示无水平阴影,必须设置。v-shadow
:垂直阴影的位置,可正可负,值为0表示无垂直阴影,必须设置。blur
:阴影的模糊半径,可选,值越大,阴影越模糊,不设置时阴影边缘锐利。color
:阴影的颜色,可选,默认为黑色。
-
text-shadow
text-shadow
属性同样也支持多个阴影,多个阴影之间用逗号隔开即可。例如:text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff;
上述代码表示为文本添加两个阴影,一个在右下方,另一个在左上方。第一个阴影的水平偏移量为1px,垂直偏移量为1px,模糊半径为2px,颜色为#000;第二个阴影的水平偏移量为-1px,垂直偏移量为-1px,模糊半径为2px,颜色为#fff。
text-shadow
属性可以通过调整各个参数的值,实现不同的文本阴影效果。通常,为文本添加一个略微模糊、颜色较浅的阴影,可以让文本看起来更加立体和清晰。 -
filter
filter
属性是 CSS3 中的一个强大属性,它可以为元素添加各种视觉效果,如模糊、颜色调整、亮度、对比度、饱和度等。其基本语法如下:filter: filter-function;
其中,
filter-function
是一种滤镜函数,用于指定要应用的滤镜效果。常见的滤镜函数有以下几种:-
blur()
用于模糊元素。参数值表示模糊半径,值越大,模糊程度越高。
filter: blur(5px);
-
brightness()
用于调整元素的亮度。参数值为一个百分数或小数,表示亮度的相对值。值小于 100% 表示降低亮度,值大于 100% 表示增加亮度。
filter: brightness(80%);
-
contrast()
用于调整元素的对比度。参数值为一个百分数或小数,表示对比度的相对值。值小于 100% 表示降低对比度,值大于 100% 表示增加对比度。
filter: contrast(150%);
-
grayscale()
用于将元素转换为灰度图像。参数值为一个百分数或小数,表示转换的程度。
filter: grayscale(50%);
-
hue-rotate()
用于调整元素的色相。参数值为一个角度值,表示旋转的角度。旋转的角度范围为 0~360 度。
filter: hue-rotate(90deg);
-
invert()
用于反转元素的颜色。参数值为一个百分数或小数,表示反转的程度。
filter: invert(50%);
-
opacity()
用于调整元素的透明度。参数值为一个百分数或小数,表示透明度的相对值。值小于 100% 表示降低透明度,值大于 100% 表示增加透明度。
filter: opacity(50%);
-
saturate()
用于调整元素的饱和度。参数值为一个百分数或小数,表示饱和度的相对值。值小于 100% 表示降低饱和度,值大于 100% 表示增加饱和度。
filter: saturate(150%);
9、sepia()
用于将元素转换为深褐色调的图像。参数值为一个百分数或小数,表示转换的程度。
-
drop-shadow()
用于为元素添加阴影效果。参数值可以包括一个长度值和两个可选的颜色值。第一个参数表示阴影的水平偏移量,第二个参数表示阴影的垂直偏移量,第三个参数表示阴影的模糊半径,第四个参数表示阴影的颜色。如果只有一个长度值,则表示阴影的水平和垂直偏移量相同。
filter: drop-shadow(2px 2px 2px #000);
-
url()
用于引用 SVG 图像或定义自定义滤镜。参数值为一个 SVG 文件或 SVG 中定义的一个滤镜标识符。
filter: url("filters.svg#filter-id");
上述是一些常见的
filter
函数,还有其他一些函数,如url()
、matrix()
等等。使用filter
属性可以为网页元素添加一些很酷的视觉效果,但同时也需要考虑浏览器兼容性问题。
-
-
五、CSS 的3D动画
CSS 3D 动画属性的其他常用属性如下:
- transform-origin:指定元素变换的基点位置,默认是元素中心点。可取值:
- x-axis:left、center、right。
- y-axis:top、center、bottom。
- z-axis:length。
- backface-visibility:指定元素反面是否可见。可取值:
- visible:默认值,反面可见。
- hidden:反面不可见。
- perspective-origin:指定 3D 转换元素的观察者视角的位置。可取值:
- x-axis:left、center、right。
- y-axis:top、center、bottom。
- z-axis:length。
- transform-style:指定被转换元素的子元素如何被平移、旋转和缩放。可取值:
- flat:默认值,子元素不进行 3D 转换。
- preserve-3d:子元素进行 3D 转换。
- perspective:指定 3D 转换元素的观察者视角,用于模拟真实 3D 空间。值越小,视角越近,立体感越强。可取值:
- length:表示长度值,必须为正数,常见单位有 px、em、rem、% 等。
- animation:指定元素动画效果的相关属性。可取值:
- animation-name:指定动画名称。
- animation-duration:指定动画效果持续的时间。
- animation-timing-function:指定动画效果的时间函数。
- animation-delay:指定动画效果延迟的时间。
- animation-iteration-count:指定动画重复次数。
- animation-direction:指定动画方向。
- animation-fill-mode:指定动画效果在开始前和结束后如何显示。
- animation-play-state:指定动画的播放状态,可以暂停或继续播放。