CSS动画之其详细介绍
不良帅. 2024-08-28 09:33:01 阅读 95
CSS动画详细介绍
transform属性
可以对DOM元素的位置大小及形状，进行矩阵变换，相比直接修改DOM属性，有更好的性能和效果
基于矩阵变换公式的transform属性：但此方法涉及复杂的数学公式麻烦
平移translate函数
单变量<code>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">code>
<head>
<meta charset="UTF-8" />code>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />code>
<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>code>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。