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>：关键帧列表的名字，实际开发中，一般把关键帧列表名字放到最前面，若涉及到多个动画，使用逗号分隔，然后分别设置每个动画的参数以下是一个示例：’<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="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><divclass="text-animation">CSS</div></body></html>
本文转载自: https://blog.csdn.net/m0_75116965/article/details/141089608
版权归原作者 不良帅. 所有， 如有侵权，请联系我们删除。
版权归原作者 不良帅. 所有， 如有侵权，请联系我们删除。