CSS动画之其详细介绍

不良帅.

于 2024-08-10 13:21:41 发布

阅读量420

点赞数 20

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_75116965/article/details/141089608

版权

CSS动画详细介绍

transform属性

可以对DOM元素的位置大小及形状，进行矩阵变换，相比直接修改DOM属性，有更好的性能和效果

基于矩阵变换公式的transform属性：但此方法涉及复杂的数学公式麻烦

平移translate函数

单变量transform:translate(10px)：元素向水平方向平移10px
双变量transform:translate(10px,20px)：元素水平方向平移10px，垂直方向平移20px
函数变量也可用百分比形式，如transform:translate(50%,50%)，此百分比变量参照自身元素的宽高进行平移

旋转rotate函数

单变量transform:rotate(30deg)：默认以元素中心点为中心旋转，正数表示顺时针旋转，负数表示逆时针旋转
通过transform-orign:top left，来改变旋转中心点，如上例即为以左上角为旋转中心点

缩放scale函数

单变量transform:scale(0.6)：表示宽和高都缩放到指定的倍数
双变量transform:scale(0.5,0.8)：表示宽和高分别缩放到指定倍数
通过transform-orign:top left，可改变缩放的基点

倾斜skew函数

单变量transform:skew(30deg)：表示规定水平方向的倾斜角度
双变量transform:skew(30deg,10deg)：表示分别规定水平和垂直方向的倾斜角度
通过transform-orign:top left，可改变倾斜的基点

矩阵matrix函数

可以实现上述提到的所有效果，一般用于实现复杂的动画变换
六个参数transform:matrix(a,b,c,d,e,f)
- 参数a、b：控制元素的缩放
- 参数b、c：控制元素的倾斜或斜切
- 参数e、f：控制元素的平移

transition属性

主要用于给元素属性的变换添加过渡效果，比如让属性变换更加平滑或更加自然

语法格式

四个参数transition:property duration timing-function delay
- 参数property：需要进行过渡的属性
- 参数duration：需要过渡的时长，相当于动画从开始到结束的全部时间
- 参数timing-function：缓动函数，实际应用过程中可以多尝试不同属性值使用，以下的属性值基本可以满足绝大部分场景
  - 贝塞尔缓动函数：
    - ease：缓慢开始，陡然加速，再逐渐减速至结束
    - ease-in：缓慢开始，再逐渐加速至结束，最终突然停止
    - ease-out：突然开始，再逐渐减速至结束，最终突然停止
    - ease-in-out：缓慢开始，然后加速，再减速至结束
  - 线性缓动函数：linear从开始到结束都是固定的速度，实际函数是linear(0,1)，函数内参数为给定点后，连接这些点绘制的函数
  - 阶跃缓动函数：steps(2,end)，根据传入的步骤和策略，分布完成过渡
参数delay：动画开始前的延迟时间

@keyframes语句和animation属性

@keyframes介绍

@keyframes是一种CSS语句，用于定义动画序列中关键帧的样式

语法格式

@keyframes name{
    keyframe-selector{
        css-styles;
    }
}

name:关键帧列表的名字，要保证全局且唯一，否则可能会被覆盖
keyframe-selector：关键帧选择器，用于选择触发关键帧的时间点，使用百分比来指定，0%表示动画开始的时候，100%表示动画结束的时候，由于开始结束的特殊性，也可用预定义的值from和to来代替
css-styles：关键帧改变的样式

示例：

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

animation介绍

关键帧@keyframes定义好后，需要设置animation属性，让元素根据这些关键帧执行动画，它可以将关键帧列表和元素联系起来，并且可以指定动画的一些行为和细节

语法格式

简写属性animation:<duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state> <keyframes-name>,...

参数<duration>：设置动画的时长，即进行一个动画周期需要的时间
参数<timing-function>：缓动函数，与transform不同的是，transform适用于开始与结束之间的过渡效果，而这里的适用于关键帧之间的过渡效果，这个缓动函数也可在@keyframes中设置animation-timing-function属性来为每个关键帧设置缓动函数
参数<delay>：开始延迟播放的时间
参数<iteration-count>：动画播放的次数
- infinite为无限循环播放
- 其它任意阿拉伯数字为动画播放次数
参数<direaction>：动画播放的方向
- normal：默认值，每次动画循环时，将动画重置为起始状态，并重新开始
- reverse：与normal类似，但动画执行方向相反
- alternate：先是正向播放，之后为反向播放，如此循环正反交替播放
- alternate-reverse：先是反向播放，之后为正向播放，如此循环反正交替播放
参数<fill-mode>：动画播放前后的样式规则
- none：默认值，动画开始前和结束后，关键帧列表中定义的样式对元素没有任何影响，动画播放完后，元素还是那个元素
- forwards：动画结束后，元素保留动画最后一帧的样式
- backwards：动画开始前，元素使用动画第一帧的样式
- both：同时具有forwards和backwards的特点
参数<play-state>：动画播放的状态，控制为paused和running暂停和播放状态，可用于一些交互效果等，例如

.loading{
    animation-play-state:paused;
}
.loading:hover{
    animation-play-state:running;
}

参数<keyframes-name>：关键帧列表的名字，实际开发中，一般把关键帧列表名字放到最前面，若涉及到多个动画，使用逗号分隔，然后分别设置每个动画的参数

以下是一个示例：’

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>文字动画案例</title>
		<style>
			.text-animation {
				background-color: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 
				color: transparent;
				background-clip: text;
				-webkit-background-clip: text;
				background-size: 400% 400%;
				background-position: 50% 100%;
				font-size: 100px;
				font-weight: bold;
				animation: text-animation 10s linear infinite alternate;
			}

			@keyframes text-animation {
				0% {
					background-position: 0% 50%;
				}
				100% {
					background-position: 50% 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="text-animation">CSS</div>
	</body>
</html>